javascript - CSS/cut an img's width when reducing the screen/window width 减少屏幕/窗口宽度

Question

我想要一个 100% 宽度和最大高度的图像。当缩放窗口并达到最大高度时，宽度仍应为 100%，但将图像“裁剪”得更大(前提是图像大小合适)。这意味着当它在一个大尺寸的窗口上时，你可以看到更多的图像边(左和右)，而在一个小尺寸的窗口上你可以看到更少。我会发布我的 CSS 尝试，但我现在不知道如何做。希望您能理解我的问题，我会附上一张可视化图。

我的代码，不要混淆，我想做一个 slider ，但现在只关注一张图片，所以 slider 暂时退出游戏:

.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>