为什么我的图片不包含在包装div中？

Question

我试图将我的图像包装在容器div中，但是当我这样做时，我的图像仍占用原始大小的整个宽度和高度。相反，我希望图像占据包装容器的相应宽度和高度，而不是使用它自己的。

我试过使用对象：封面;虽然它似乎不适用于我的情况。

.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

Answer 1

如果您为图像设置了任何宽度或高度，则需要使用object-fit。

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

Forked fiddle或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>

如果您想使用link，请参阅以下object-fit以获取更多详细信息

Answer 2

这对你有用吗？

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

.desktop-slideshow img{
  width: 100%;
  height: 100%;
}