CSS /减小屏幕/窗口宽度时，剪切img的宽度

Question

我希望图像的宽度为100％，最大高度为。缩放窗口并达到最大高度时，宽度应仍为100％，但将图像“裁剪”得更大（提供的图像尺寸合适）。这意味着在较大的窗口中可以看到更多的图像侧面（左右），而在较小的窗口中可以看到较少的图像侧面。我将发布CSS尝试信息，但目前我不知道如何执行此操作。希望您能解决我的问题，我将在图表上进行介绍。

我的代码，不要感到困惑，我想做一个滑块，但现在只专注于一张照片，所以滑块暂时不在游戏中

.slider-inner img {
  display:none;
  max-width: 100%;
  height: auto;
}

#main-slider {
  width: 80%;
  min-width: 500px;
  height: 450px;
  min-height: 400px;
  overflow: hidden;
  margin: 0 auto;
}

.slider-inner{
  width: 100%;
  height: 450px;
  margin: 0 auto;
  position:relative;
  overflow: hidden;
  float:left;
  padding: 0px;

}

我想要的（可视化）：

Answer 1

如果我对您的理解正确，那么当窗口尺寸较小时，您希望图像保持其高度并裁剪宽度。

检查此示例：

div{
  height: 300px;
  position: relative;
  overflow: hidden;
}

div img{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div>
<img src="https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d542ff4e10ff7de9d35d2ec8a467454&w=1000&q=80">
</div>

Answer 2

您可以使用背景图片执行此操作：

.box {
  height:200px;
  background:url(https://picsum.photos/1300/300?image=1069) center top/auto 100% no-repeat;
}

<div class="box">

</div>

Answer 3

您之前也有“最大宽度：100％”和“高度：自动”。 100％是相对单位，表示要占据父容器宽度的100％，并且auto告诉它在保持宽高比的同时按宽度缩放。