Q: Placing elements over object-fit: contained images I am using object fit to contain images in divs like so: https://jsfiddle.net/d3r50L57/2/
<div class="img_container">
    <img src="https://cdn2.vox-cdn.com/thumbor/MR8HRp3Zgp8Dhn2wUD8ujrbbbJc=/33x0:1893x1046/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/48754639/firewatch_review_main.0.0.jpg">
</div>

and
.img_container{
  width: 300px;
  height: 200px;
  background-color:orange;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

I want to put a text overlay over ONLY the image but the problem is that since it has been resized by object-fit contain, when I select the image element, the space that has been left empty from refitting is selected as well. In the example, if you inspect the image element, you see that the top and bottom white space is considered part of the image, so it makes overlaying over just the picture hard. Any pointers or workarounds would be appreciated. 
Thanks.

A: object-fit is only effective if the element (i.e. img):


*

*has it's width and height defined. 

*and must be a replaced element.


If you have 100% height on the img, then that would be 100% of it's parent (i.e. .img_container 200px). So if you want only what is visible to be selected, then you should use the img dimensions as it relates to it's AR (aspect ratio). So instead of 100% height, try auto. After changing height to auto, your img will not be vertically centered within .img_container anymore. There are a couple of ways to vertically center the img, but to make things simple I already did the math and it's margin-top: 15.625px*.


.img_container {
  width: 300px;
  height: 200px;
  background-color: orange;
}
img {
  width: 100%;
  height: auto;
  object-fit: contain;
  margin-top: 15.625px;
}
<div class='img_container'>
  <img src='https://cdn2.vox-cdn.com/thumbor/MR8HRp3Zgp8Dhn2wUD8ujrbbbJc=/33x0:1893x1046/1600x900/cdn0.vox-cdn.com/uploads/chorus_image/image/48754639/firewatch_review_main.0.0.jpg'>
</div>


*TL;DR
The natural dimensions of this particular jpeg is 1600x900px so it's AR is 16:9. So if the width is reduced to 300px, it's height should be 168.75px. The height of the parent is 200px, so the difference between half the height of .img_container (ic/2 = 100) and half the height of img (img/2 = 84.375) is 15.625px for the margin-top of img.
