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?
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://picsum.photos/id/27/100/200" class="image-1" >
</div>
<div class="container">
<img src="https://picsum.photos/id/28/100/200" class="image-1" style="right:100px;bottom:10000px">
</div>
<div class="container">
<img src="https://picsum.photos/id/29/100/200" class="image-1" style="right:-10px;bottom:-10000px">
</div>
<div class="container">
<img src="https://picsum.photos/id/30/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.
Related questions:
CSS object-fit: contain; is keeping original image width in layout