对象拟合、对象定位和绝对定位答案

【问题标题】：object-fit, object-positioning and absolute positioning对象拟合、对象定位和绝对定位
【发布时间】：2019-08-20 07:02:55
【问题描述】：

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

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

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

为了解决这个问题，我在第三张图像上使用了最大宽度和高度，但这完全忽略了对象位置，并且不会增长到比自身更大的宽度或高度。

为什么对象适合仅适用于声明的宽度和高度，而不是如果图像仅占用坐标空间，为什么对象位置不适用于最大宽度和高度？

【问题讨论】：

标签： css css-position object-fit

【解决方案1】：

图片是一个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/left 值定义的，但它使用的是图像的默认值因此没有比率失真，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 只是简单地调整图像的位置和固有大小。如果您明确指定宽度/高度或添加max-width/max-height 约束，那么您将能够像您已经做的那样更改计算出的height/width。

输入元素发生同样情况的相关问题：Width of absolute positioned input doesn't follow CSS rules

在您的情况下，object-fit 仅适用于第一种情况，因为您设置了height:100% 和width:100%，因此我们存在比率失真。第二种情况（如上所述）和第三种情况都不会发生任何事情，因为您只是定义了max-height/max-width，因此图像将简单地遵循此约束并尝试保持其初始比例。

换句话说，object-fit 仅在您更改宽度和高度并且此更改破坏初始比率时才有效。仅更改其中一个或一个都不更改会使object-fit 的使用无用。