html - 使用 max-width 100% 和 height auto 时图像被剪切

Question

我是 CSS 的新手，由于我的技术专长不是很好，我会尽量简单地解释。我有一个图像使用了一半的屏幕我在阅读了几篇文章后使用了下面的 CSS 代码

<div class="div-block-87">
  <img src="image.jpg" alt="">
</div>

img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
  height: auto;
}

问题是图像被剪切如下:

当我使用按预期显示的检查图像时，请参见以下内容:

抱歉，如果我的描述很糟糕，但我不知道该怎么解释。

Answer 1

您可以使用 object-fit: cover .

如果您还需要指定图像位置，请使用 object-position: center center .

请注意，这些属性在旧版浏览器中不可用。

如果您需要支持较旧的浏览器，您可以使用 div 标签而不是 img 并为其背景设置样式(图像、位置、大小、适合度)。

Demo