Fitting container to image and caption

HTML & CSS
1

I have a page that shows a dozen or so photos with a caption, and I’m trying to find a way to get the caption to wrap (if necessary) rather than the container grow to fit a long caption.

I have a codepen here

I realise that setting width or max-width would do the trick but the page is dynamically created with images of various widths.

I feel as though I’m seeking the impossible or am missing the obvious!

2 Likes
2

Maybe missing the table behavior.

Try something like this:

.image-container{
    display:inline-table;
    width:1%;
}

The table will adjust width to embrace the image but not the text so long as it can wrap.

EDIT)
If you want, I have a quiz example that aligns the images bottom edges/caption top edges to those in adjacent containers.

2 Likes
3

Try this:

<div class="image" style="margin:1.42em; width:203px; text-align:center;">
    <a href="#">
        <img 
            src="http://webdesignpaciano.com/dbl-new/places/paciano/11.jpg" 
            alt="Central Square and Comune Building with Bell Tower Paciano 1" 
            width="203" height="270" 
         />
  <br>
  Central Square and Comune Building with Bell Tower Paciano 1
  </a>  
</div>

Edit:
The DIV width is the same as the image.

1 Like
4

Yes that’s the way to handle it and is a trick from 1999 when people used tables for this :slight_smile:

4 Likes
5

Thanks guys. That works a treat. I had been wondering if a container would do the trick.

6

Care to show the result?

7

What about aligning the image captions in your Codepen something like this? :slight_smile:

697×609 372 KB

2 Likes
8

I’ve updated the codepen, John.

I’ve changed the image alignment to top @Erik_J for now as middle looked gross. How to get the captions to align?

1 Like
9

Maybe I named your image container wrong in the code snippet, I should have suggested you to try it on the container you already had, the .image of course, no need for an extra wrapper.

Sorry! :grin:

Would you like to try the “Coherent Captions Alignment” challenge or should I PM the code that fits your Codepen?

2 Likes
10

FF seems to be unable to find the image site (404). Am I having a bad hair day?

11

Thank you. That looks a lot better.

A long time ago I struggled with various size thumbnails and produced a very convoluted solution…

https://www.johns-jokes.com/pix/56

…of which I am not proud :frowning:

1 Like
12

I thought I tried that first time and it didn’t work, but it does now!!

That should make aligning the captions easier (I think) so I’ll accept the challenge, Erik! (Don’t know when I’ll get round to it though…)

It works for me in FF, Ron, although the site uses Cloudflare which might be your problem? I’ve cleared the cache in case that helps.

13

Too late, I’ve already PM you how to get them aligned.

Instead I challenge you who reads this to align @Gandalf Codepen like I posted above.

@John_Betong, @ronpat, and others, take a shot at it, it maybe is much easier than you think! :stuck_out_tongue_winking_eye:

2 Likes
14

I did this a couple of years ago so it might fit the bill :slight_smile:

2 Likes
15

Hi @PaulOB,

Nice Codepen demo! :slight_smile:

In that Codepen css, I think there is one (two) ruleblock you can remove and still have the alignment intact. :stuck_out_tongue_winking_eye:

Please correct me if that would cause crossbrowser issues?

16

There may have been a problem a couple of years ago but I don’t see the need for the table-row now. I think that was leftover from another demo and can be removed :slight_smile:

There were problems in IE8 with figure and figcaption so it may have been something that I was trying to fix there originally.

1 Like
17

My issue is not limited to FF or to one computer. It appears that the host is not being found in DNS. I don’t remember how to troubleshoot Windows network files.

It seems that I cannot access that one site, webdesignpaciano.com. Can anyone give the the IP address of that site? I can tack on the path to an image unless it’s being blocked by the ISP. This is weird.

18

I’m not seeing images in the codepen either. My guess is that because the codepen is https and the images are at http they are being considered “insecure content”

Paul’s codepen loads the images, but the codepen is at http

19

If I’m following you, Paul’s images are placeholders, not images from webdesignpaciano.com. The webdesign… site is the only one that is “not found” (404) on all of my systems.

20

I couldn’t discover the IP number atm, but I could see that it is @Gandalf own bussiness site (I think).

Either try change the Codepen url to http or try change the image paths to https. It seems work either way.