Jump to content

How to center a IMG content inside a DIV container


EvairPeterson

Recommended Posts

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.

Edited by EvairPeterson
Translate errors
Link to comment
Share on other sites

You should never use position: for website layout, especially absolute or fixed. instead of using img tag use background-image: instead, then you can use

background-position:

background-size: auto 100%;

to get all the features you just mentioned.

  • Thanks 1
Link to comment
Share on other sites

12 hours ago, dsonesuk said:

instead of using img tag use background-image: instead, then you can use

background-position:

background-size: auto 100%;

to get all the features you just mentioned.

Hi dsonesuk.

I am absolutely grateful for your help, as I have been seeking a viable alternative for quite some time. I followed your recommendations and everything worked perfectly well. I am very grateful.

I just had to delete IMG and add these lines in the CSS that modifies the DIV container of the image:

    background-image: url(imagem-teste-001.jpg);
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;

Greetings from Brazil.
Evair Peterson.

Edited by EvairPeterson
Link to comment
Share on other sites

I am here now thinking about some things, about this sollution applied to my case, which replaces the IMG tag with BACKGROUND-IMAGE ...

The page I'm developing will be a type of deposit of images about certain attractions available here in my region. On this site, there will be little written content, because the images themselves will be your main content.

If I use BACKGROUND-IMAGE, I think I may have a big problem with Google and other search engines, who will don't index my images, because they will not be inside the IMG tag, which I understand to the extent of the ALT attribute are Google's increased resources to index the images and share them in the results of your searches.

And actually the indexing of these images will be extremely important for the popularization of my site.

Is there any other way to get the same result yet using the IMG tag?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...