标签: object-position

对象配合、对象定位和绝对定位

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

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

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

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

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

css object-fit object-position

3
推荐指数
1
解决办法
9215
查看次数

标签 统计

css ×1

object-fit ×1

object-position ×1