WordPress.org

Ready to get started?Download WordPress

Forums

Auto resizing images to fit max width? (7 posts)

  1. caffeinedreamer
    Member
    Posted 4 years ago #

    Hello all, hope you can help me. I know this code can squash an image in the post to fit the maximum width of my column:

    p img {
    max-width: 100%;
    }

    However, I would prefer the image was automatically resized to fit the maximum width. Anyone have the code for this?

    I had it "kind of" fixed by changing the maximum medium / large width for media settings, but that's bugging out on me now. I'd much prefer to fix it with code for the stylesheet. I'm sorry, but I'm not very good with code!

  2. vtxyzzy
    Member
    Posted 4 years ago #

    I can't test without a link to your site, but did you try just using 'width: 100% !important;'?

  3. caffeinedreamer
    Member
    Posted 4 years ago #

    Sorry, it's here.

    p img {
    max-width: 100% !important;
    }

    did nothing

    p img {
    width: 100% !important;
    }

    produced the same results as

    p img {
    max-width: 100%;
    }

    (squashes image to fit width rather than resizing it)

  4. vtxyzzy
    Member
    Posted 4 years ago #

    I think it will work if you set the height to auto as well, like this:

    p img {
      width: 100% !important;
      height: auto;
    }
  5. caffeinedreamer
    Member
    Posted 4 years ago #

    <3 Thank you!

  6. vtxyzzy
    Member
    Posted 4 years ago #

    You are welcome!

  7. caffeinedreamer
    Member
    Posted 4 years ago #

    Sorry, but I'm getting a bit of a problem with this code. While it does indeed resize large images that would otherwise break borders, it also resizes smaller / low res images to the max width too (unless, for some reason, they are captioned). Can anything be added to the code to sort out this issue?

    Sorry to rebump!

Topic Closed

This topic has been closed to new replies.

About this Topic