WordPress.org

Ready to get started?Download WordPress

Forums

Resizing images for a responsive design (14 posts)

  1. akiryk
    Member
    Posted 2 years ago #

    Problem: when I say max-width:100% in my css, images adjust by width but not height -- they just squish narrower.

    I'm trying to make a responsive web design, meaning fluid grids and images that resize to the width of their container. Ethan Marcotte's book (Responsive Web Design) talks about using
    img {
    max-width:100%;
    }
    It works for him here: http://unstoppablerobotninja.com/demos/resize/ but not for me. I'm guessing this is because wordpress gives me an image with width and height attributes included in the img tag. Is there a way around this? Any other ideas?

  2. nataliemac
    Member
    Posted 2 years ago #

    The answer probably lies in the CSS for the TwentyEleven theme, which is responsive:

    /* Images */
    .entry-content img,
    .comment-content img,
    .widget img {
    max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
    }
    img[class*="align"],
    img[class*="wp-image-"] {
    height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */
    }
    img.size-full {
    max-width: 97.5%;
    width: auto; /* Prevent stretching of full-size images with height and width attributes in IE8 */
    }

    Looks to me like images with an explicit width and height declared on them require a resetting of the width and/or height to 'auto' in order to take advantage of responsive resizing.

    Good luck!

  3. teolopez
    Member
    Posted 2 years ago #

    ^ you just saved me a whole lot of sleepless nights lol thanks for pointing that out. However I was looking over it and is there a way to make the thumbnail images for posts fluid? reason I ask is because I copy pasted the code you provided into my theme and it worked for the rest of the images in a post or page but the thumbnail I was not able to do so. Any help is greatly appreciated!!

    Thanks in advance.

  4. pieter
    Member
    Posted 2 years ago #

    For me this is working:

    <?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'thumbname' ); echo '<img src="' . $image_src[0] . '" width="100%" />'; } ?>

    I put it in my template-file. With 'thumbname' is the name of the thumbnail defined in functions.php

  5. nataliemac
    Member
    Posted 2 years ago #

    @teolopez - I'd imagine that all you have to do is update those CSS selectors so that your thumbnail is being selected too.

  6. thanushka
    Member
    Posted 2 years ago #

    The reason for weird vertical scaling (when we make them scalable in CSS), is because of the width and height in <img> tags. WordPress automatically adds a width and height to all it's <img> tags.

    Even though we make the images scalable in CSS, with img{max-width: 100%;} We have to completely remove both width and height values from all images <img> for them to scale proportionately.
    If it's an image in a post or a static page/ template page, all you have to do is, add the above CSS to the style.css file, and then remove the 'width' and 'height' properties from the <img> tag.
    If it's a dynamic image such as a slideshow or post thumbnail we can use a function to remove the width and height. Here's a link to a tutorial

    This is the page/demo which I have put the above function to work..

  7. nataliemac
    Member
    Posted 2 years ago #

    @thanushka - Have you had a look through the twentyeleven theme? The images still have width and height attributes, but the CSS I copied out of twentyelevent's style.css and shared above enables the images to behave responsively even with the width and height attributes.

  8. thanushka
    Member
    Posted 2 years ago #

    @nataliemac The setting the height to auto doesn't work for images such as post thumbnails of a custom post type. The link I posted (it's an article I wrote after facing and finding a solution for this same issue), show how to make all images responsive.

  9. nataliemac
    Member
    Posted 2 years ago #

    @thanushka That's so weird! I wonder why it works in one place and not another. I'll have to investigate and see what's going on.

  10. timDesain
    Member
    Posted 2 years ago #

  11. casabsolute
    Member
    Posted 2 years ago #

    I'm currently checking out this purely CSS solution (with media queries) to making all images in WordPress resize responsively : http://jeffsebring.com/responsive-wordpress-images/ - so far, so good for me.

  12. iamspacehead
    Member
    Posted 1 year ago #

    The problem with a pure css approach is that the images can have large file sizes, which can impact website performance significantly on a mobile device.

    I've created a small theme plugin that allows your theme to detect whether it is on a mobile device and load a scaled down version of the image.

    Check it out!

    http://www.spaceheadconcepts.com/blog/wordpress/responsive-images-responsage/

  13. coolgates
    Member
    Posted 1 year ago #

    What about making images with captions responsive? Big barrier to this seems to be that the width of the caption div is declared inline as a pixel value.

    http://core.trac.wordpress.org/ticket/14380

    Anybody have any great ideas? I did find some code that removes the inline style, but then what? Using a percentage (of the post width) to set the caption div width works better, but how would you accomodate different image sizes (e.g. thumbnail vs. large).

    Thoughts?

  14. dmoutal
    Member
    Posted 1 year ago #

    Not sure if this applies to all themes or not but this is the css I used to get images with captions (and the captions themselves to resize properly

    .wp-caption,
    .wp-caption-text {
    max-width: 97.5%;
    height: auto;
    width: auto9; /* ie8 */
    }

    Hope others find this useful.

    BTW I am using the headway theme (not free unfortunately) and the tabloid child theme.

    Now I want to figure out how to resize embedded videos

Topic Closed

This topic has been closed to new replies.

About this Topic