Contain image size with parent

Question

I´ve been trying to keep my images next to each other on the same line, and just crop them to a smaller size if needed. Why doesn't object-fit work ?

HTML:

<div class="gallery">
  <div class="inner"><img src="images/image1.jpg"></div>
  <div class="inner"><img src="images/image2.jpg"></div>
  <div class="inner"><img src="images/image3.jpg"></div>
</div>

CSS:

.gallery{
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner{
   width: 333px;
   height: 300px;
}

.inner img{
   object-fit: contain;
}

so i want the image to stay the same ( nothing getting cut of) but i just want the size to become the same as the parent DIV .inner. I´m new to coding so if stuff does not make sense please tell me. — Jonas.D, Aug 01 '18 at 19:22

score 12 · Accepted Answer · answered Aug 01 '18 at 19:46

You should set the width and height on the img in order to use it with object-fit. And it looks like object-fit: cover; might be what you're after.

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

Full snippet:

.gallery {
  width: 1000px;
  height: 300px;
  display: flex;
}

.inner {
  flex: 0 0 33.333333%;
  /*or flex: 1; */
  /*or width: 33.333333%; */
  height: 100%;
}

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

<div class="gallery">
  <div class="inner"><img src="https://picsum.photos/300/300"></div>
  <div class="inner"><img src="https://picsum.photos/400/600"></div>
  <div class="inner"><img src="https://picsum.photos/600/400"></div>
</div>

I'm not sure if this works with Firefox and Edge. Any thoughts? — Con Antonakos, Jan 08 '19 at 16:16
@ConAntonakos - on my end it works fine on Firefox, Edge, and Chrome. — benvc, Jan 24 '20 at 20:16

Contain image size with parent

1 Answers1