Como centralizar uma IMG na horizontal no interior de DIV contêiner?

04/06/2018

24

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.
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
Responder

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
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

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários. Para saber mais sobre o uso de cookies,
consulte nossa política de privacidade. Ao continuar navegando em nosso site, você concorda com a nossa política.

Aceitar