对象拟合，对象定位和绝对定位 [英] object-fit, object-positioning and absolute positioning

问题描述

在尝试使图像适合矩形时，我遇到了一个奇怪的问题，想知道是否有人知道这三种使用对象适合度的行为方式为何不同:

Whilst trying to make an image fit into a rectangle, I came across a weird problem and wondered if anyone knew why these three ways of using object fit act differently:

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

从第一张图片中可以看到-宽度和高度都可以正常工作.在第二个图像中，我尝试设置图像，使其以绝对定位而不是宽度和高度填充空间，但这完全被忽略，图像只是溢出或保持其原始大小.

As you can see from the first image - everything works fine with a width and height. In the second image, I try to set the image so it fills the space with absolute positioning instead of width and height, but this is totally ignored and the image just overflows or stays it's original size.

要解决此问题，我在第三幅图像上使用了max-width和height，但是这完全忽略了对象位置，并且不会增长到比其自身更大的宽度或高度.

To fix this, I use a max-width and height on the third image, but then this totally ignores the object-position and doesn't grow to a width or height larger than itself.

为什么对象适合只能在声明的宽度和高度下工作，而不是如果图像仅占用坐标空间，为什么对象位置不能在最大宽度和高度下工作?

Why does object fit only work with a declared width and height and not if the image is just taking up space with coordinates and why does object-position not work with max-width and height?

推荐答案

图片是已替换元素，因此使用 top / left / right / bottom 不能像使用不可替换元素(简单的 div 例如).这是规范中的相关部分:

The image is a replaced element so the use of top/left/right/bottom will not work like it will do with a non-replaced element (a simple div for example). Here is the relevant parts from the specification:

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 / left 值，但是它使用图像的默认值之一，因此没有比率失真，并且 object-fit 不会做任何事情

To make it easier the computed height/width of your image aren't defined by the top/bottom and right/left values but it's using the default one of the image thus there is no ratio distortion and object-fit will do nothing.

为底部/右使用不同的值，您将看到它们被忽略:

Use different value for bottom/right and you will see that they are ignored:

.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 只是在调整图像的位置和固有尺寸.如果您明确指定宽度/高度或添加 max-width / max-height 约束，则可以更改计算出的 height / width ，就像您已经做过的那样.

Basically the top/left are simply adjusting the position and the intrinsic size of the image are used. If you explicitely specify the width/height or you add max-width/max-height constraint then you will be able to change the computed height/width like you already did.

与输入元素发生相同情况的相关问题:绝对定位输入的宽度不遵循CSS规则

Related question where the same happen with an input element: Width of absolute positioned input doesn't follow CSS rules

在您的情况下， object-fit 仅在第一种情况下起作用，因为您设置了 height:100％和 width:100％.由于仅定义了 max-height / max-width ，因此在第二种情况下(如上文所述)和第三种情况都不会发生，因此图像将仅遵循此条件约束，并将尝试保持其初始比率.

In your situation object-fit is only working for the first case where we have ratio distortion since you set height:100% and width:100%. Nothing will happen on the second case (like explained above) and also for the third case since you simply defined max-height/max-width thus the image will simply follow this constraint and will try to keep it's initial ratio.

换句话说， object-fit 仅在您更改宽度和高度并且此更改破坏了初始比率时才起作用.只需更改其中之一或不更改它们，就无法使用 object-fit .

In other words, object-fit will only work if you change the width AND the height AND this change break the initial ratio. Changing only one of them or none of them make the use of object-fit useless.

相关问题:

CSS对象适合:包含；在布局中保持原始图像宽度

对象适配如何与画布元素一起工作?

这篇关于对象拟合，对象定位和绝对定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！