我正在尝试获取一张图片来替换另一张图片但不拉伸(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>
最佳答案
您可以使用 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>
关于html - 使用 CSS content 属性设置图像并使其不拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55571454/