WordPress.org

Ready to get started?Download WordPress

Forums

How Do I Modify CSS to Auto-Resize Images With Captions (6 posts)

  1. Hydrohawke
    Member
    Posted 1 year 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?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Provide a link to the problematic webpage for specific help.

  3. Hydrohawke
    Member
    Posted 1 year ago #

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

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    How should that image & caption look like?

  5. Hydrohawke
    Member
    Posted 1 year 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.

  6. Andrew
    Forum Moderator
    Posted 1 year 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.

Topic Closed

This topic has been closed to new replies.

About this Topic