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>