Object-Fit, Object-Positioning and Absolute Positioning

object-fit, object-positioning and absolute positioning

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>

Put a div on top of an image exactly in position with object-fit

Try this, to get the accurate top and center positioning of div you can use CSS calc() function.

#box{  width:auto;  height:auto;  position:relative;  overflow:hidden;}img{  width:100%;  min-height:100%;  object-fit:cover;}#box > .bx{  position:absolute;  width:60px;  height:60px;  background:#111;  top:5%;  left:calc(100% - 60%);  color:#fff;}

<div id="box"><div class="bx">Text</div><img src="http://i.stack.imgur.com/7Mj25.jpg"></div>

Object-fit doesn't work with fixed width and height

specify your image to the block

specify both height and width:

width: 100%;
height: 100%;

use object-fit: cover or object-fit: fill

.block {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}

.block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="block">
  <img src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Sample Image">
</div>

Object-Fit, Object-Positioning and Absolute Positioning