如何使用HTML和CSS实现图片的'background-size: cover”和'background-size: contains”效果？

显示具有相当于“background-size: cover”和“background-size: contains”属性的图像

您的担忧来自于希望在 HTML 文档中显示具有与背景图像的“background-size: cover”CSS 属性相同属性的图像。您已尝试对 div 元素中的图像使用“width: 100%”和“width: auto”样式，但由于屏幕尺寸变化而遇到响应能力限制和不良行为。

解决方案 #1 ：object-fit 属性（有限浏览器支持）

“object-fit”属性是专门为此目的而设计的。通过设置“object-fit: cover;”在 img 元素上，您可以实现所需的行为，使图像填充可用空间，同时保持其纵横比。但请务必注意，Internet Explorer 不支持此属性。

示例：

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover; /* or object-fit: contain; */
}

<img src="https://loremflickr.com/1500/1000" alt="A random image from Flickr" />

以上是如何使用HTML和CSS实现图片的'background-size: cover”和'background-size: contains”效果？的详细内容。更多信息请关注PHP中文网其他相关文章！