在尝试使图像适合矩形时,我遇到了一个奇怪的问题,想知道是否有人知道为什么这三种使用对象适合的方式表现不同:
.container {
width: 250px;
padding-top: 20%;
border: 1px solid red;
position: relative;
display:inline-block
}
.container>img {
position: absolute;
top: 0;
left: 0;
object-fit: contain;
object-position: center center;
}
.image {
width: 100%;
height: 100%;
}
.image-1 {
right: 0;
bottom: 0;
}
.image-2 {
right: 0;
bottom: 0;
max-height: 100%;
max-width: 100%;
}Run Code Online (Sandbox Code Playgroud)
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-1">
</div>
<div class="container">
<img src="https://www.fillmurray.com/200/300" class="image-2">
</div>Run Code Online (Sandbox Code Playgroud)
正如您从第一张图片中看到的那样 - 宽度和高度一切正常。在第二张图像中,我尝试设置图像,以便它用绝对定位而不是宽度和高度填充空间,但这完全被忽略,图像只是溢出或保持其原始大小。
为了解决这个问题,我在第三个图像上使用了最大宽度和高度,但这完全忽略了对象位置,并且不会增长到比自身更大的宽度或高度。
为什么对象适合仅适用于声明的宽度和高度,而如果图像只是占用坐标空间则不起作用,为什么对象位置不适用于最大宽度和高度?