如果已经在HTML中设置了宽度和高度，您可以使用CSS（或JS / JQ）按比例调整图像大小

Question

Is there a way to proportionally resize an image if the height and width are already defined in the tag?

Obviously, if I have an image tag like:

<img src="whatever.jpg" width="500" height="350">

and use max-width like:

img { max-width: 200px; }

I'll end up with an image that is 200px by 350px.

I'd prefer a pure CSS solution (which I'm fairly sure does not exist), but might also be able to use some Javascript and/or jQuery.

Answer 1

Ofcourse, you set the other dimension to auto :

img{
    height:auto;
    width:200px;
}

Answer 2

I don't think CSS can do that.

With jQuery, it's trivial. You don't even need the width and height attributes in the HTML, though it's usually good to have them.

$("img").each(function(){
    var real_width = $(this).width();
    var real_height = $(this).height();
    var max_width = $(this).css("max-width");  // Or just say 200
    if (real_width > max_width) {
        var ratio = real_width / real_height;
        $(this).width(max_width);
        $(this).height(max_width / ratio);
    }
});

I haven't tested this code so there might be minor bugs, but the general idea is there.

Edit: On some browsers, $(document).ready() will fire before all the images have been loaded. If you have an image without explicit width and height attributes, this can be a problem because $(this).width() will return 0. In that case, just ensure that all images have width and height attributes, or attach this code to $("img").load() instead.

Answer 3

// parameters
// obj      : usually $('img') object I presume.
function thumbnail_resize(obj){
    var maxW = 50;      var maxH = 50;
    var wid = obj.width();
    var hei = obj.height();

    if( wid > maxW ) {
        hei *= (maxW / wid);
        wid = maxW;
    }
    if( hei > maxH ) {
        wid *= (maxH / hei);
        hei = maxH;
    }
    obj.attr('width', wid);
    obj.attr('height', hei);

    delete maxW, maxH, wid, hei;
    return;
}