object-fit, object-positioning and absolute positioning

by

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.

Related questions:

CSS object-fit: contain; is keeping original image width in layout

How does object-fit work with canvas element?

More Related Contents:

  1. CSS positioning things differently between browsers [closed]
  2. Why can’t an element with a z-index value cover its child?
  3. How can I center an absolutely positioned element in a div?
  4. Fixed position but relative to container
  5. Why bottom:0 doesn’t work with position:sticky?
  6. Understanding z-index stacking order
  7. Difference between style = “position:absolute” and style = “position:relative”
  8. Make div stay at bottom of page’s content all the time even when there are scrollbars
  9. Why does applying a CSS-Filter on the parent break the child positioning?
  10. Center a position:fixed element
  11. How to make fixed header table inside scrollable div?
  12. What are `scrolling boxes`?
  13. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  14. What are the default top, left, botton or right values when position:absolute is used?
  15. Difference between static and relative positioning
  16. How does object-fit work with canvas element?
  17. Set Google Maps Container DIV width and height 100%
  18. position: absolute without setting top/left/bottom/right?
  19. CSS: Top vs Margin-top
  20. pure CSS multiple stacked position sticky?
  21. CSS: display:inline-block and positioning:absolute
  22. How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?
  23. Targeting position:sticky elements that are currently in a ‘stuck’ state
  24. Absolute positioning ignoring padding of parent
  25. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  26. position:fixed when left/top/right/bottom aren’t specified – desired results in FF/IE, but not in Safari
  27. position relative in firefox [duplicate]
  28. Have a fixed position div that needs to scroll if content overflows
  29. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  30. Why magin:auto is not enough to center position absolute or fixed?

Leave a Comment