object-fit, object-positioning and absolute positioning

Question

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.

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?

Temani Afif · Accepted Answer · 2021-01-12T22:24:45.173

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

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>

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.

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

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.

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.

object-fit, object-positioning and absolute positioning

1 Answers1

Linked

Related