0

This is my html code

<div><img src="picture1.jpg" /></div>
<div><img src="picture2.jpg" /></div>
<div><img src="picture3.jpg" /></div>

My div containers have certain fixed dimensions:

div{
    width: 400px;
    height: 400px;
    object-fit: cover;
    overflow: hidden;
}
img{
    height:100%;
    width: 100%;
    display: block;
}

And I want to show as much of the middle of the image as possible inside the div containers (and crop the rest of the image away). So depending on the dimension of the image I want either to crop a little bit left and right from the image or top and bottom. Such that the biggest square within the image is shown. This square shall be centered and of course scaled accordingly.

I tried a lot and read a lot of threads before. For example this one. The problem is that nothing works for me parallel for different image dimensions (keep in mind that I don't want to adapt the code for different images). I want one code for all!

The html code shall be as it is. Only the css shall be adapted to make it work (so I don't want to use background images). But I'm open for fancy state of the art CSS stuff. Use flex layout or whatever you want!

principal-ideal-domain
  • 3,998
  • 8
  • 36
  • 73

2 Answers2

5

add object-fit: cover; to the image to fill the given size while not stretching the image. Also use height: 100%; width: 100%; to make sure that the image only take the given space.

The image will be centered by default.

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* for demonstration only */

div {
  margin-bottom: 20px;
}

div:nth-of-type(1) {
  width: 200px;
  height: 50px;
}

div:nth-of-type(2) {
  width: 200px;
  height: 100px;
}

div:nth-of-type(3) {
  width: 200px;
  height: 200px;
}
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
<div><img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg"></div>
tacoshy
  • 10,642
  • 5
  • 17
  • 34
-1

My solution would be simple:

div {
  width: 200px; /* or whatever size you need */
  height: 200px; /* or whatever size you need */
  position: relative;
  overflow: hidden;
}

div img {
  max-width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div><img src="https://via.placeholder.com/300x600.jpg"></div>

The bad part of this solution is if any of the images have a very different ratio. In this case, the combination of min-height (for example) with the same size of the div would be necessary.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Jorge Monte
  • 13
  • 3
  • Far to complicated and will not ensure that the image will actually take all available space. If the height of the image is smaller then the wrapping div, then you will get white-space. Also you overflow the parent mostlikely. Compared to `object-fit` it overcomplicates an actual simple solution. – tacoshy May 26 '21 at 15:46
  • PS: I eddited your question to include a reproduciable code snippet. Also fixed your commenting. `//` is not a valid commenting for CSS or HTML. for CSS `/* comment */` has to be used. `//` is only a one line comment available for JS – tacoshy May 26 '21 at 15:51
  • As I said: Depending on the ratio of the image it could cause a problem. There was no need to down-vote. Also, the object-fit has a good % among the browsers but still not at 100%. – Jorge Monte May 26 '21 at 16:40
  • the only browser that does not support `object-fit` is IE11. IE13 and IE19 have no issue with it. IE going to be retired by Microsoft on 17th August 2021. The down-vote was for unecessary overcomplicating an issue. The is literally no reason to overcomplicate a real simple solution just to support one single old browser that not going to be around for more then 3 month. – tacoshy May 26 '21 at 17:03