Grow your CSS skills. Land your dream job.

Resizing Images for Responsivness

  • # March 28, 2014 at 10:20 am

    Hi All,

    I’m working on a website here

    I’m trying to get the images the full width of the container, I seem to have lost the selector that works. I’m currently using #block-1 .article header a.post-thumbnail

    the bigger challenge is for the images to resize according to screen size. It doesn’t seem to size correctly when resizing my browser window, or on my IPhone.

    What is the correct CSS use here? Thanks for your input.

    # March 28, 2014 at 1:44 pm

    IMO, if you’re doing a responsive site the standard is this:

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

    If you need some more specific help, I need more input. Not very clear on where the problem is in that site.

    # March 28, 2014 at 2:22 pm

    Thanks for your help, That did the trick… sort of. I had to add a margin-right: -20px; to the container to the image to extend 100% of the box. But it is working now.

    # March 28, 2014 at 2:51 pm

    100% width just means it’s going to fill up the parent. If the parent has padding, margin, etc. it will only go so far.

    I’m still not sure which exact part of the entire website is causing problems, but I’m glad it’s working for you.

    NIX
    # March 28, 2014 at 10:10 pm

    Shane is right. You need to set your widths to be percentages. This is rare but if you need to preserve aspect ratio at all times, let me know by @ mentioning me and I’ll hit you with a little trick you can use.

    # March 29, 2014 at 12:42 am

    @shaneisme

    is there a reason why it’s max-width:100% and not width 100%?. Width:100% seems to preserve the aspect ratio too, and there’s no need to assign an auto height.

    I usually use

    display:block;
    width:100%;
    max-width: whatever appropriate value; /* this is used only when I do no want the images to exceed a certain width. For instance, an image within a 250 px wide container(when calculated for the desktop), might become 'huge' when the layout becomes single column, say at 500 or 600 px window width. */
    margin:0 auto;
    
    # March 29, 2014 at 7:03 am

    This is for ALL images throughout the site, not just ones you want to go full viewport width.

    If you use width: 100% on all images, they will all fill up the parent, even small ones.

    max-width will make it smaller as the parent shrinks, but the width is automatically rendered by the browser.

    You wouldn’t want to assign display: block to all images either.

    Side note, with width 100%, margin: 0 auto isn’t doing anything (unless you’re resetting something I’m not shown here).

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".