Question

There’s this question bothering me for some time. There are tons tutorials and Q&A’s about responsive images, but I haven’t found a decent one, that could explain me how to keep the dimensions of a portrait-image not to stretch to the width of the cointainer they are in.

What I have:

I use WordPress, and I remove the width & height of my images with a script:

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

And then I add a script, that puts my attachments into a div (just for styling purposes).

add_filter('image_send_to_editor', 'wrap_my_div', 10, 8);

function wrap_my_div($html, $id, $caption, $title, $align, $url, $size, $alt){
    return '<div class="post-attachment">'.$html.'</div>';
}

and then the CSS:

img {
        width: 100%;
}

.post-attachment {
    width: 80%;
    margin: 0 auto;
}

This works really great for landscape images & looks great on mobile. But how to keep images, that are in the portrait dimensions, not to scale to the width of the 100% container? I know, its kind of wierd, if I have declared the width:100% and I don’t want some images to be 100% width, but rather 100% height.

If there isn’t a CSS way, then may-be someone can suggest me any jquery plugins (or a WP plugin, though I don’t want to use them)? Or some links to dig into?

Thank you.

Answer 1

Instead of width, use max-width:

img {
    max-width: 100%;
}

That way they will be their original size if they are small, but if they are larger, they will keep within the boundaries of the enclosing parent.