How Do I Set Responsive Image Size?

  • Resolved washingtonsblog

    (@washingtonsblog)


    8 years, 10 months ago

    My website is Washington’s Blog, and I use Twenty Ten.

    I want to create responsive image sizing, where every image fills up the entire WIDTH of my content area. I don’t care about height, but I want to preserve the original ratio of width-to-height.

    I’m thinking of using either:

    p img {
    width: 100% !important;
    height: auto;
    }

    OR

    img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    }

    If I insert one of those CSS snippets, will it automatically resize all of my already-posted and new images to full width?

    Or will it keep the old pixel settings (e.g. width=”780″ height=”500″), and only apply the 100% width to newly-posted images with no pixel specifications?

    Or will some conflict between my old posts with width/height pixel settings and the new CSS code somehow mess up the old images?

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)

  • You want:

    .entry-content img {
width: 100%;
max-width: 100%;
}

    max-width: 100% only stops it getting bigger than 100% of its container. If it’s smaller than its container it won’t go larger, that’s what width: 100% does.

    Thread Starter washingtonsblog

    (@washingtonsblog)

    doubledesign,

    Thank you. Do I want to throw in height: auto; ?

    Like this:

    .entry-content img {
    width: 100%;
    max-width: 100%;
    height: auto;
    }

    ??

    That’s probably not strictly necessary but certainly won’t hurt ??

    Thread Starter washingtonsblog

    (@washingtonsblog)

    Thank you, works like a charm. As a follow-up question, is there a way to set that 100% width CSS attribute for only SOME of the images, and then invoke that attribute for certain classes of images, but not others?

    In other words, I almost always want the 100% width, but occasionally there’s an image with low resolution that I need smaller.

    So could I create one CSS attribute for 100% width, and a second that keeps the width/height pixel settings I manually type in the html code in the individual post?

    Thread Starter washingtonsblog

    (@washingtonsblog)

    Never mind … I figure it out. Thanks!

    Hi, @washingtonsblog! I’m having the same issue. I’d like to set MOST image width’s to 100%, but not my portrait views.

    How did you resolve?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How Do I Set Responsive Image Size?’ is closed to new replies.