Good evening.
I'm creating a 3-column layout, in which the left and right columns should have their widths set to 300px, and the middle column should fit in the rest left over. Regarding the layout everything is OK, exactly as I need it. However, within the central DIV, I put an IMG, which I want to always occupy 100% of the height of this DIV and that it is centered horizontally, independently of the width of the DIV in which this IMG is contained is larger or smaller width than the width of the IMG itself. Relative to occupying 100% of the height everything is OK, no matter how I resize the browser window it is self-adjusting as desired. However, it is not getting horizontally centered, as is the goal. It is always left-aligned, except when the width of the DIV is greater than the width of the IMG, so the IMG is thus perfectly centered inside the container DIV. However, when the width of the DIV is smaller than the width of the IMG, the IMG is left-aligned, cutting portions of the image only on its right side, not getting centered as expected.
I'm testing on a desktop with 1920x1080 resolution and the image I'm using at IMG is 1680x945px.
Here are the HTML and CSS codes:
!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;
}
Does anyone know how can I fix this problem?
Thank you in advance for any help and cooperation.
Thank you, Evair Peterson.