对象适合、对象定位和绝对定位
object-fit, object-positioning and absolute positioning
在尝试使图像适合矩形时,我遇到了一个奇怪的问题,想知道是否有人知道为什么这三种使用对象适合的方式表现不同:
.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%;
}
<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>
正如您从第一张图片中看到的那样 - 一切都适用于宽度和高度。在第二张图片中,我尝试设置图片,使其用绝对定位而不是宽度和高度填充 space,但这被完全忽略,图片只是溢出或保持其原始大小。
为了解决这个问题,我在第三张图片上使用了最大宽度和最大高度,但这完全忽略了对象位置并且不会增长到大于自身的宽度或高度。
为什么对象适合仅适用于已声明的宽度和高度,而如果图像仅占用 space 坐标,为什么对象位置不适用于最大宽度和高度?
图像是 replaced 元素,因此使用 top
/left
/right
/bottom
不会就像使用 non-replaced 元素(例如简单的 div
)一样工作。以下是规范中的相关部分:
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
为方便计算,您的图像的 height
/width
未由 top
/bottom
和 right
/[ 定义=13=] 值,但它使用默认的图像之一,因此没有比率失真,object-fit
什么都不做。
为 bottom
/right
使用不同的值,您会看到它们被忽略了:
.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-1 {
right: 0;
bottom: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-100px;bottom:50%">
</div>
基本上top
/left
只是简单地调整位置和使用图像的固有尺寸。如果您明确指定 width/height 或添加 max-width
/max-height
约束,那么您将能够像您已经做的那样更改计算的 height
/width
。
输入元素发生相同情况的相关问题:
在您的情况下,object-fit
仅适用于自您设置 height:100%
和 width:100%
以来出现比率失真的第一种情况。第二种情况(如上所述)和第三种情况都不会发生任何事情,因为您只是定义了 max-height
/max-width
因此图像将简单地遵循此约束并尝试保持其初始比率。
换句话说,object-fit
只有在您更改宽度和高度并且此更改打破了初始比例时才会起作用。仅更改其中之一或其中 none 会使 object-fit
无用。
相关问题:
在尝试使图像适合矩形时,我遇到了一个奇怪的问题,想知道是否有人知道为什么这三种使用对象适合的方式表现不同:
.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%;
}
<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>
正如您从第一张图片中看到的那样 - 一切都适用于宽度和高度。在第二张图片中,我尝试设置图片,使其用绝对定位而不是宽度和高度填充 space,但这被完全忽略,图片只是溢出或保持其原始大小。
为了解决这个问题,我在第三张图片上使用了最大宽度和最大高度,但这完全忽略了对象位置并且不会增长到大于自身的宽度或高度。
为什么对象适合仅适用于已声明的宽度和高度,而如果图像仅占用 space 坐标,为什么对象位置不适用于最大宽度和高度?
图像是 replaced 元素,因此使用 top
/left
/right
/bottom
不会就像使用 non-replaced 元素(例如简单的 div
)一样工作。以下是规范中的相关部分:
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width
https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height
为方便计算,您的图像的 height
/width
未由 top
/bottom
和 right
/[ 定义=13=] 值,但它使用默认的图像之一,因此没有比率失真,object-fit
什么都不做。
为 bottom
/right
使用不同的值,您会看到它们被忽略了:
.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-1 {
right: 0;
bottom: 0;
}
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://www.fillmurray.com/100/200" class="image-1" style="right:-100px;bottom:50%">
</div>
基本上top
/left
只是简单地调整位置和使用图像的固有尺寸。如果您明确指定 width/height 或添加 max-width
/max-height
约束,那么您将能够像您已经做的那样更改计算的 height
/width
。
输入元素发生相同情况的相关问题:
在您的情况下,object-fit
仅适用于自您设置 height:100%
和 width:100%
以来出现比率失真的第一种情况。第二种情况(如上所述)和第三种情况都不会发生任何事情,因为您只是定义了 max-height
/max-width
因此图像将简单地遵循此约束并尝试保持其初始比率。
换句话说,object-fit
只有在您更改宽度和高度并且此更改打破了初始比例时才会起作用。仅更改其中之一或其中 none 会使 object-fit
无用。
相关问题: