图像/ DIV - 无法弄清楚如何让带有标题的图像留在移动视口中

Question

I run a tiny little website for myself. It's mainly a hobby site. It uses WP 6.1 and DIVI as a theme.

On a recent post ( you can see here ), I had an author want to have captions under some photos. I tried putting the photos in a DIV and using float on the DIV. It mainly works.

The problem is this: In a mobile device view (iphone portrait or landscape), some of the photos extent to the right beyond the view port. And one, the puppy photo at the top, sticks off to the left partly outside the viewport.

I'm so close to achieving what I want: The ability to embed an image with caption, and then align both where I want (normally would just put style="align:left;" on the IMG tag.

Anyways, kinda pulling my hair out. The thing is, in Firefox responsive view for iphone 11, some of the photos look like they fit, others don't. But on a real iphone (14), most of them are extending beyond the actual viewport.

So I think I'm missing something that would tell the image part of my code to SHRINK responsively, but it's not really working fully.

I think it may be the margin: auto part. But I'm not sure how to fix this.

Can anyone offer any thoughts? Here's a little snippet of the DIV that encloses the images, but you can also just visit the link, too and see the source.

<div style="margin: 0px auto; width: 600px; padding: 15px; border: 1px solid black; text-align: center;"><img src="https://crazydogliving.com/wp-content/uploads/2023/01/Delilah_collage_1.jpg" /><strong>
First Christmas one year later. Nap time!</strong></div>

I'd really be grateful.

I was expecting the images on mobile inside the child DIV containing the photo and caption to responsively scale and fit in the viewport on mobile.

Answer 1

The problem is the width. If u use max-width the img still in the screen. "max-width:100%;"

    <div style="margin: 0px auto; width: 600px; padding: 15px; border: 1px solid black; text-align: center;max-width: 100%"><img src="https://crazydogliving.com/wp-content/uploads/2023/01/Delilah_collage_1.jpg" style="max-width: 100%"/><strong>
    First Christmas one year later. Nap time!</strong></div>