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告诉它在保持宽高比的同时按宽度缩放。