html - 使用 CSS content 属性设置图像并使其不拉伸(stretch)

Question

我正在尝试获取一张图片来替换另一张图片但不拉伸(stretch)，背景尺寸可能会被覆盖。在我构建的演示中，真实图像是一只大象，但我仅通过 CSS 将其替换为一只狮子 - 我不允许更改 HTML 来实现这一点。

但是它被拉伸(stretch)了。添加 background-size: cover 什么都不做。有没有什么方法可以使狮子图像不被拉伸(stretch)，不会改变 div 或图像的高度，而是通过 background-size: cover 或类似的东西来拉伸(stretch)？感谢您的帮助。

div {
  width: 300px;
  height: 400px;
  background: lightgreen;
}
img {
  width: 100%;
  height: 400px;
content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
}

<div>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>

Answer 1

您可以使用 object-fit: cover .

div {
  width: 300px;
  height: 400px;
  background: lightgreen;
}

img {
  width: 100%;
  height: 400px;
  content: url(https://c81s22ku6ih1er8af18cv13c-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Lion.jpg);
  object-fit: cover;
}

<div>
  <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQudlp3slhvMcKABuQ3hqSbMiBQVUO7nYlDgw_-oj2dUzQ84SEw' />
</div>