Fórum Como centralizar uma IMG na horizontal no interior de DIV contêiner? #594671

04/06/2018

Boa noite.

Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.

Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.
Seguem os códigos HTML e CSS:

<!doctype html>
<html lang="pt-br">
<head>
    <link type="text/css" rel="stylesheet" href="code/css/estudo.css">
</head>
 
<body>
    <div id="main">
        <div id="viewport_left" class="viewports">
        </div>
        <div id="viewport_center" class="viewports">
            <img id="imagem_teste" src="imagem_teste_01.jpg">
        </div>
        <div id="viewport_right">
        </div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
}
#main {
    width: 100%;
    margin: 0;
}
#viewport_left {
    min-height: calc(100vh - 25px);
    margin-bottom: 25px;
    width: 324px;
    background-color: #333333;
    position: fixed;
    left: 0;
    top: 0;
}
#viewport_center {
    min-height: calc(100vh - 25px);
    width: calc(100vw - 650px);
    margin-bottom: 25px;
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    background-color: red;
    position: absolute;
    left: 50%;
    top: 50%;
        margin-left: calc(((100vw - 648px) / 2)* -1);
        margin-top: calc((100vh / 2)* -1);
    display: table;
    overflow: hidden;
}
#imagem_teste {
    max-height: calc(100vh - 25px);
    position: absolute;
    width: auto;
    height: auto;
}
#viewport_right {
    min-height: calc(100vh - 25px);
    margin-bottom: 25px;
    width: 324px;
    background-color: #333333;
    position: fixed;
    right: 0;
    top: 0;
}
#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 24px;
    width: 100%;
    background-color: #333333;
    border-top: 1px solid #FFFFFF;
    text-align: center;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}

Alguém sabe como posso corrigir este problema?
Desde já agradeço a toda e qualquer ajuda e colaboração.

Grato, Evair Peterson.

Evair Peterson

Curtir tópico

+ 0

Responder

Post mais votado

07/06/2018

No teu CSS, nas definições da imagem, troca o tipo de position: absolute

#imagem_teste {
    max-height: calc(100vh - 25px);
    position: absolute;
    width: auto;
    height: auto;
}

Para position: relative

#imagem_teste {
    max-height: calc(100vh - 25px);
    position: relative;
    width: auto;
    height: auto;
}

era isso que você queria?

Espero ter ajudado. :D

Alex William

Responder

Gostei + 1

Mais Posts

07/06/2018

Evair Peterson

Boa noite Alekym.

Agradeço sua prontidão em ajudar, mas infelizmente o resultado é o mesmo, tanto com o position em absolute, como em relative.

Agradeço de qualquer forma!
TKS :-D

Responder

Gostei + 0

09/07/2018

Aparecida Gonçalves

Olá Evair,
tudo bem?
Eu tentei montar uma estrutura baseado no seu problema. Segue o código:

<!-- Bootstrap versao 3.3 12 Colunas -->
<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <title>Colunas Bootstrap</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <style>
    .container p{
    text-align:center;
    color: white;
    }
    .esquerda{
    background-color: blue;
    height:300px;
    }
    .meio{
    background-color: #cccccc;
    height:300px;
    }
    .meio img{
    display: block;
    width: 100%;
    max-width: 240px; /* largura da sua imagem original */
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    }
    .direita{
    background-color: brown;
    height:300px;
    }
    </style>
<body>
    <div class="container">
        <div class="esquerda col-xs-12 col-md-3">
        <p>Conteúdo A - Lado Esquerdo</p>
        </div>
        <div class="meio col-xs-12 col-md-6">
        <p>Conteúdo B - Meio </p>
        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png"> <!-- Obs. imagem original tem 240 x 88 px -->
        </div>
        <div class="direita col-xs-12 col-md-3">
        <p>Conteúdo C - Lado Direito</p>
        </div>
    </div>
</body>
</html>

Um ponto importante que eu acho que vale a pena você se atentar, é a real necessidade de ter colunas laterais com os 300pixel fixos... porque sendo fixos, você terá problema quando esse mesmo conteúdo for aberto em tablets e em celulares (tanto horizontal quanto vertical).
Como geralmente não sabemos quais os dispositivos que os usuários irão usar, acho que seria viável adotar o Bootstrap e trabalhar com as porcentagens das Colunas, no lugar de fixar pixels.
Espero ter ajudado!
Cida Luna.

Responder

Gostei + 0