Positioning text relative to an image when the image size changes

Question

I'm trying to think of a clever way to deal with a part of a webpage where the image is going to be swapped out with different images (of varying widths, max being 620px wide), and a text caption is absolutely positioned over it. I want the text to absolutely position based on the width of the image rather than the width of the relatively positioned container.

I was thinking maybe something with background-image, rather than an image itself, but then I have to deal with the fact that it's an empty div with a background image, so I'd have to hardcode a height, which wouldn't work since some of these images would be taller than others.

Any solutions you guys can think of would be greatly appreciated. Thanks!

Solution 1

I'm not sure if I'm following 100%, but here's how to do what I think you're trying to do.

Create your container with position relative, set your widths and heights, and set overflow to hidden:

.container-outer {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

Next, create an inner container inside of it that simply has position: absolute

.container-inner {
  position: absolute;
}

Finally, create your overlay text style to be 100% width and center horizontally (or however you want it to be positioned)

.overlay {
  position: absolute;
  text-align: center;
  width: 100%;
  margin: 0;
}

Here's the jsfiddle with an example: http://jsfiddle.net/BGvca/1/

Good luck!

Solution 2

I raise the previous answer with some more CSS

<div class="imageholder">
    <div class="caption">Simon &amp; Garfunkel</div>
    <img src="http://greenobles.com/data_images/simon-and-garfunkel/simon-and-garfunkel-03.jpg">
</div>​

.imageholder{
    position: relative;
    float: left;
}
.caption{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: Helvetica,sans-serif;
    font-size: 1em;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 1em 2em;
}

​ See the jsFiddle for reference.

Solution 3

If you make the div containing the image inline-block, its width will scale to the size of its content, ie your image.

Once the container is sizing correctly, you can center other child elements, like your caption, inside it using a wrapper with text-align: center, or no wrapper and value of auto for the left and right margins.

Here's an example: http://jsbin.com/uyajaw/3/edit (with ugly borders and backgrounds to show where stuff is)

Click the image to resize it and see the caption still centered.

Note that if your caption is likely to be larger than your image, it will probably expand the width of the container div, throwing off the center alignment. You can avoid this by making the setting position: absolute; left: 0; right: 0; on the caption, or by giving it a width that you know will always be smaller than your image.