horizontal centering a picture don't matter the browser size

EvairPeterson · June 9, 2018

Don't matter the browser size, I need that the picture ocup 100% the browser height. For this, I just set the img heith in 100vh, and the code works fine. But, I also need this image be horizontal centered in the browser. For this, I've set the text align of my DIV that contain my IMG in center. When the browser width is greater than the img width, it works fine. But, if the browser width is less than the img width, the img go left aligned. I really need that img be centered in the browser size all the time, don't matter the conditions. I just know that I can do it replacing the img for background-image and set the background-position in center. But, if I did it, Google will not index my images and it results in a big trouble for me.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="code/css/test.css">
</head>

<body>
<div>
  <img src="image.jpg">
</div>
</body>
</html>

* {
	margin: 0;
	padding: 0
}
div {
	background-color: red;
	text-align: center;
}
img {
	height: 100vh;
}

(The picture I'm working is 1680px x 945px)

At the image below I'm showing the correct horizontal align for this picture. Centered:
https://uploaddeimagens.com.br/imagens/certo-jpg-feef13d2-44d2-407b-8b1b-f334107cb371

And... At this another image, I'm showing the error it ocurrs. The picture is left aligned and crop only the right side of the picture:
https://uploaddeimagens.com.br/imagens/errado-jpg-746c72b8-36d2-4942-9895-0cfb43abd77d

What I need is... When the browser width is less than the img width, the picture still be centered in the browser, resulting that the image would be cropped both sides, ledt and right sides, and it will result in this specifically image, the church in background will be centered in the browser all the time. It was a simple example that what I need.

Is there any way for center this image like I need using only CSS?

I will be very grateful to anyone who can help me with this problem.
Thanks. Greetings from Brazil.

Edited June 9, 2018 by EvairPeterson

Ingolme · June 9, 2018

It can be centered, but at the cost of losing the scroll bar. CSS can't control scrolling.

The structure is simple. We push the left boundary of the image halfway across the container's width, then subtract half of the image's width by translating it.

<div class="container"><img src="file.png"></div>

.container {
  position: relative;
  overflow: hidden;
  min-height: 100vh
}
.container > img {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  width: auto;
}

EvairPeterson · June 9, 2018

3 minutes ago, Ingolme said:
It can be centered, but at the cost of losing the scroll bar. CSS can't control scrolling.

The structure is simple. We push the left boundary of the image halfway across the container's width, then subtract half of the image's width by translating it.
<div class="container"><img src="file.png"></div>
.container {
  position: relative;
  overflow: hidden;
  min-height: 100vh
}
.container > img {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  width: auto;
}

Hi Ingolme.

It works absolutelly fine for me. In fact I'm already interested in removing the scrollbars from my site, but I just don't put it here to simplify the problem. You helped me a lot, my friend. I've been looking for a way to do this for a long time. Thank you so much!

Sign In

horizontal centering a picture don't matter the browser size

Recommended Posts

EvairPeterson

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

EvairPeterson

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity