How to align text to image that is auto scaled with object-fit: contain

Question

I have a viewport that takes up about 75% of the screen and I fit single images of varying aspect ratios into it using the object-fit: contain css. Above the image I have text labels for the file name & type. I want to keep these aligned to start at the left most edge of the image and end at the right most edge. I could do this easily before by aligning them to the <img> tag.

One side effect of using object-fit: contain is that the <img> element is bigger than the viewable picture, so when I try to align text to the <img> it can appear that the text is floating off of the image.

How can I align the text to the viewable image, when the img tag is expanded to fit the whole viewport but the actual picture is autoscaled inside the img tag using object-fit: contain?

Since you're fitting the images inside a container, why don't you just align the label to the viewport/container? — junkfoodjunkie, Mar 03 '17 at 03:11
That's what we did, but in order to dynamically auto-scale the image to the container without losing its aspect ratio we set `object-fit: contains` in the css which makes the `img` tag take up 100% width and 100% height of the container, but dynamically scales the actual picture within that `img` tag. So the element itself is taking up 100% width but the picture inside it isn't necessarily doing the same which leaves a weird hanging effect when the text is all the way out to the ends and the picture is only 75%-ish of the container wide — Adam James, Mar 04 '17 at 13:26

score 1 · Accepted Answer · edited May 23 '17 at 11:53

The solution is very much dependent on markup, fixed widths and/or heights etc.

Assuming you don't know their width/height in advance, you'll need a script, as in below sample.

Updated: I added the opacity so the image and text display's at the same time.

If you do know them, you still need to work out a bunch of CSS animation rules, covering their ratio and animation setting to make it look good, which can be done, though it will take some work. In the end of this answer is a sample how to set an element size based on the same way fit-content calculate size.

document.querySelector('img').addEventListener('load', function(e) {
  document.querySelector('.image-text').style.cssText = 'width: ' + e.target.width +'px; opacity: 1;';
})

.image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
  border: 1px dashed gray;
  margin-bottom: 10px;
}

.image-wrap img {         /*  fit-content replacement  */
  position: relative;
  max-height: 100%;
  max-width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

div.image-text {
  opacity: 0;
  margin: 0 auto;
}

<div class="image-text">Some text we want to size and break at the same width as the image</div>
<div class="image-wrap">
  <img src="http://placehold.it/500x400" alt="some image here" />
</div>

Here is another post about getting an images both natural and scaled size:

object-fit: get resulting dimensions

How to align text to image that is auto scaled with object-fit: contain

1 Answers1