0

I am trying to wrap my image inside a container div although when doing so my image still takes up the full width and height of the original size. Instead, I want the image to take up the according width and height of the wrapper container instead of using its own.

I have tried to use object-fit:cover; although it does not seem to be working in my situation.

.desktop-slideshow {
  height: 500px;
  width: auto;
  outline: 4px solid red;
}

.desktop-slideshow img {
  object-fit: cover;
}
<div class="desktop-slideshow">
  <img src="https://www.placehold.it/1920x1080" alt="">
</div>

JS Fiddle

Tyler Roper
  • 20,529
  • 6
  • 30
  • 51
  • Possible duplicate of [How do I auto-resize an image to fit a div container](https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container) – dwjohnston Jan 22 '19 at 02:32
  • How about `max-height: 100%; max-width: 100%;`? – MTCoster Jan 22 '19 at 02:33
  • `object-fit` only works if you set a height and width on your image. Just add `height: 100%; width: 100%` to your `img`. CSS. – Tyler Roper Jan 22 '19 at 02:34

2 Answers2

1

You need to use object-fit if you have set any width or height for the image.

.desktop-slideshow img{
  object-fit: cover;
  max-width:100%;
  min-height:100%;
  height:100%;
  width:100%;
}

Forked fiddle or Snippet:

.desktop-slideshow {
  height: 500px;
  width: auto;
  outline: 4px solid red;
}

.desktop-slideshow img {
 object-fit: cover;
 max-width:100%;
 max-height:100%;
 height:100%;
 width:100%;
}
<div class="desktop-slideshow">
  <img src="https://www.placehold.it/1920x1080" alt="">
</div>

See the following link for more detail if you want to use object-fit

Mukyuu
  • 4,695
  • 7
  • 32
  • 51
-1

would this work for you?

.desktop-slideshow{
  height:500px;
  width:auto;
  outline: 4px solid red;
}

.desktop-slideshow img{
  width: 100%;
  height: 100%;
}
Davo
  • 926
  • 6
  • 14
  • I'd imagine OP was using `object-fit` in an attempt to maintain aspect ratio, something that `width: 100%; height: 100%` will not achieve on its own. To be clear though, I actually haven't downvoted your answer, as OP really hasn't specified that "maintaining aspect ratio" is or is not important. – Tyler Roper Jan 22 '19 at 02:39