Можете ли вы пропорционально изменить размер изображения с помощью CSS (или JS / JQ), если ширина и высота уже заданы в HTML

Question

Есть ли способ пропорционального изменения размера изображения, если высота и ширина уже определены в теге?

Очевидно, если у меня есть тег изображения, например:

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

ииспользуйте max-width, например:

img { max-width: 200px; }

Я получу изображение размером 200 на 350 пикселей.

Я бы предпочел чистое решение CSS (в чем я уверенне существует), но может также использовать Javascript и / или jQuery.

Answer 1

Конечно, вы устанавливаете другое измерение на auto:

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

Answer 2

Я не думаю, что CSS может это сделать.

С jQuery это тривиально.Вам даже не нужны атрибуты ширины и высоты в HTML, хотя обычно хорошо иметь их.

$("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);
    }
});

Я не тестировал этот код, поэтому могут быть незначительные ошибки, но общая идеяесть.

Редактировать: В некоторых браузерах, $(document).ready() будет срабатывать до загрузки всех изображений.Если у вас есть изображение без явных атрибутов ширины и высоты, это может быть проблемой, поскольку $(this).width() вернет 0. В этом случае просто убедитесь, что все изображения имеют атрибуты ширины и высоты, или вместо этого присоедините этот код к $("img").load().

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;
}