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

Question

我正在尝试将图像包装在容器div中，尽管这样做仍会使图像占据原始尺寸的整个宽度和高度。相反，我希望图像占用包装容器的相应宽度和高度，而不是使用其自身的宽度和高度。

我尝试使用object-fit：cover;尽管在我的情况下似乎不起作用。

.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或代码段：

.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%;
}