centering image in div without stretching it, regardless of size and format

Question

With my code, I centered the image inside of the div. This solution works fine for images that are squarish or in landscape format, but not with the ones in portrait format.

The HTML looks like this:

<div class="gallery"><img class="gallery"></div>

This is my CSS:

div.gallery {

 position: relative;
 z-index: 2;
 overflow: hidden;

}

img.gallery {

 height:100%;
 min-width: 100%;

 position: absolute;
 top:    -9999px;
 bottom: -9999px;
 left:   -9999px;
 right:  -9999px;
 margin: auto;

 box-sizing: border-box;
 z-index: 1;

}

I tried to put img.gallery on

min-width: 100%;
max-width: 100%;

but that does not do the Job as the pictures then are far to big in the div. Does anyone have a clue for me?

Use [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) with a polyfill for ie (if you are bothered about ie users) — Pete, Jun 26 '18 at 13:09
@Pete object-fit works fine until the Image is a square. then it crops out a part in the middle if the image without a need to do this. — Bernhard, Jun 26 '18 at 13:28
@Bernhard never seen it crop out the middle bit of the image before - are you using cover or contain? — Pete, Jun 26 '18 at 15:01

score 1 · Answer 1 · answered Jun 26 '18 at 13:16

1

I believe below approach solves your issue. I center image inside div using position: absolute and transform: translate, and overflow: hidden hides what, well, overflows.

div.gallery {
  height: 100px;
  width: 100px;
  border: 1px solid black;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

img.gallery {
  height: auto;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="gallery">
  <img src="http://via.placeholder.com/1000x1000" class="gallery">
</div>

answered Jun 26 '18 at 13:16

Andrzej Ziółek

2,241
1
13
21

Thanks, but this solution does not work with square elements :( – Bernhard Jun 26 '18 at 13:34
What do you mean by "does not work with square elements"? Image I use in snippet is square, 1000x1000 pixels. – Andrzej Ziółek Jun 26 '18 at 13:44
This is the only working solution after trying more than 10 answers. Thanks! – FLICKER May 06 '19 at 23:23

centering image in div without stretching it, regardless of size and format

1 Answers1