123
user profile image

I recently had to develop some functionality, for use within a CMS, that allowed an author to float an image with a caption to the left or right of a body of text. An easy task, right? I thought so too, until I noticed that my extra long test caption wasn’t respecting the width of my max-height image. See the last image in the pen for an example of this.

It took some Googlin’ and a long slog through some terrible Stack Overflow answers to find my preferred solution, which was a creative use of the display: table-caption; and caption-side: bottom; declarations.

Since this markup is being generated by a CMS, I am able to conditionally apply CSS classes, which I use to set the respective styles for an image with a max-width value versus an image with a max-height value.

I am also setting inline styles for the authored pixel values, which is a necessary evil of working with a CMS. Obviously a pragmatic approach was needed (and taken) to meet the requirements. If you find yourself in a similar situation, I hope this pen will save you some time and frustration while developing your own solution.

Requirements

  • image is to be floated left or right
  • image must must not exceed the width of the container
  • image must maintain aspect ratio when scaled
  • image may have a max-width in pixels
  • image may have a max-height in pixels
  • the caption width must respect the width of the image and not exceed it
  • both image and caption must scale to 100% container width when viewed with a narrow “mobile” viewport

Prior Art

References

Comments

  1. No comments yet.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...