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

CSS

HTML5

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

Evair Peterson

Curtidas 0

Melhor post

Alex William

Alex William

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

Mais Respostas

Evair Peterson

Evair Peterson

04/06/2018

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
GOSTEI 0
Aparecida Gonçalves

Aparecida Gonçalves

04/06/2018

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.
GOSTEI 0
POSTAR