How Do I Modify CSS to Auto-Resize Images With Captions

  • Hydrohawke

    (@hydrohawke)


    11 years, 4 months ago

    The theme I am using has pre-generated code to automatically resize images with the window size:

    /*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

    It works perfectly, except if I put a caption with the image the code doesn’t apply to the caption box (I don’t think its a div) which goes around the image. How can I modify this CSS to resize images with captions in the smae way?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    Provide a link to the problematic webpage for specific help.

    Thread Starter Hydrohawke

    (@hydrohawke)

    11 years, 4 months ago

    An example of the problem is on this page, the Anakin vs. Obi-Wan picture.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    How should that image & caption look like?

    Thread Starter Hydrohawke

    (@hydrohawke)

    11 years, 4 months ago

    If you make the window fairly narrow, you notice the white portion of the screen getting narrower and taking any text with it. The image and caption don’t change size and instead stick out into the gray area. I’d like them to scale with the window size and always stay in the white space. The theme I’m using does this with images without captions (try changing the window size on the SPH4U page) but I need help figuring out how to do it with captions.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 4 months ago

    It looks like you need this CSS;

    #primary img {
 max-width: 100%;
}

    But there’s still some inline CSS width on the <div> that contains each wrapped image & caption. I don’t know how to resolve that.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How Do I Modify CSS to Auto-Resize Images With Captions’ is closed to new replies.