对象适合不适用于固定宽度和高度
Object-fit doesn't work with fixed width and height
.block {
width: 500px;
height: 300px;
}
img {
max-width: 100%;
object-fit: contain;
}
<div class="block">
<img src="http://dialog.localhost/upload/postomat/04a/04aeacfed49dd7eda5f469f57b822f7f.jpg" alt="">
</div>
在我看来,图片应该缩小以适合块,但这并没有发生。为什么?
将您的图片指定到 block
指定高度和宽度:
width: 100%;
height: 100%;
使用object-fit: cover
或object-fit: fill
.block {
width: 500px;
height: 300px;
border: 1px solid black;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="block">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>
.block {
width: 500px;
height: 300px;
}
img {
max-width: 100%;
object-fit: contain;
}
<div class="block">
<img src="http://dialog.localhost/upload/postomat/04a/04aeacfed49dd7eda5f469f57b822f7f.jpg" alt="">
</div>
在我看来,图片应该缩小以适合块,但这并没有发生。为什么?
将您的图片指定到 block
指定高度和宽度:
width: 100%;
height: 100%;
使用object-fit: cover
或object-fit: fill
.block {
width: 500px;
height: 300px;
border: 1px solid black;
}
.block img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="block">
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="">
</div>