Question

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

但是它很紧张。添加background-size: cover不会执行任何操作。有没有什么方法可以使狮子图像不拉伸而不会改变div或图像的高度，而是通过background-size: 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);
}

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

Answer 2

您是否尝试过使用％而不是px？而且，我会在正文中添加margin: 0;。这样可以消除图像周围的空白。

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

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

设置具有CSS内容属性的图像，并使其不拉伸

2 个答案: