Responsive images with captions

[Gandalf]

I have the following HTML and CSS for an image with caption combination but I’m struggling to make it responsive. The code is used for a dozen or more images all of different sizes. I know well enough the principle of making images responsive but trying to do so with this combination is taxing my little grey cells and patience!

<figure class="iHolder">
  <img width="499" height="340" src="stimages/image006.jpg" alt="The Great Pit">
  <figcaption>The Great Pit (Excavated c.1534-1540)</figcaption>
</figure>

.iHolder {
  display: inline-table;
  width: 1%;
  background-color: #f8f8f8;
  padding: .5em;
  border: 1px solid #ccc;
  margin: 0 .5em;
}
.iHolder img {
  border: 1px solid #ccc;
}
.iHolder figcaption {
  text-align: center;
  padding: 0 .5em;
}

[SamA74]

In this case it was straight forward.
But it becomes problematic when the caption is longer, wider than the image.

It is a problem that I have tried working on before.

[Gandalf]

Thanks Sam. Yes, some of the photos have captions that are wider than the photo.

[SamA74]

Without hard coding a set width in the css it’s difficult, or you hack it by adding <br>s to the caption.
On the last example I tried a attribute value in the css (was worth a try). That may work if you added a custom data attribute to the parent figure if that’s an option.

[Gandalf]

The last example appears to work in Chrome as it is. I will have to play and test some more though.

[SamA74]

@Gandalf

The last example appears to work in Chrome as it is

I didn’t know that, I was testing in FF.

Edit: No, it works the same as the second one. The image expands beyond its native size until it reaches the width of the caption.

[Gandalf]

Hah! It looks as though attr() isn’t supported by any browser at present. http://caniuse.com/#search=attr

On that basis I’m not sure why my page appears to be working!

[John_Betong]

@Gandalf

but trying to do so with this combination is taxing my little grey cells and patience!

I had the same problem and adopted the fixed width div approach with a maximum image height above the title. The thumbnails look ragged with varying title lengths… no easy solution I’m afraid

Page of thumbnails

[SamA74]

@Gandalf

Hah! It looks as though attr() isn’t supported by any browser at present.

I figured out that it doesn’t work with width properties, but I’m sure it works with content because I have used it for that before.

You found this:-

Note: The attr() function can be used with any CSS property, but support for properties other than content is experimental.
https://developer.mozilla.org/en-US/docs/Web/CSS/attr

[Gandalf]

Yes, it doesn’t seem to be implemented for anything other than content I gather.

[PaulOB]

@Gandalf

.iHolder {
display: inline-table;
width: 1%;

If you set the table to 1% (which is needed to contain the caption to image size) then you can’t set the image to a percentage width because 100% will equal 1%.

You could either set a 20% (or similar) width for the table and have all images the same responsive size to start with. If you want natural widths but then allow the image to scale smaller you could use calc based on viewport width and end up with something like this:

The image will display at the natural size but when the viewport is the same size as the image the image will scale smaller.

[Gandalf]

@PaulOB

If you set the table to 1% (which is needed to contain the caption to image size) then you can’t set the image to a percentage width because it will 100% will equal 1%.

Yes, it was that that was “doing me 'ead in”!

Thanks for the pen, Paul.