在具有最大宽度的CSS中按比例缩放图像

Question

现在,我正在使用max-width来缩放图像以适应.但是,它们并不按比例缩放.有没有办法导致这种情况发生？我对Javascript/jQuery持开放态度.

如果可能的话,有没有办法在不知道图像的原始尺寸的情况下做到这一点(可能使用Javascript/jQuery来确定)？

Answer 1

与接受的答案相反,您可以在不指定HTML大小的情况下执行此操作.它可以在CSS中完成:

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

Answer 2

您需要指定原始宽度和高度:

<img src="/whatever" width="100" height="200" alt="Whatever" />

然后在CSS中使用这样的东西:

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

你可以尝试使用jQuery,如果你没有前面的宽度和高度,但你的里程可能会有所不同:

$(function(){
    $('#content img').load(function(){
       var $img = $(this);
       $img.attr('width', $img.width()).attr('height', $img.height());
    });
});

显然要替换#content你想要功能范围的任何选择器.

Answer 3

设置恒定宽度时使用:

height: auto

Answer 4

以下是没有Javascript的方法.设置你max-width想要的长度.

#content img { 
   max-width: 620px;
   height: auto;
}

当我没有在img标签中明确设置宽度或高度设置时,这适用于我在使用Firefox 28,Chrome 34和Safari 7的Mac上进行测试.

在max-width设置为一个人建议后,不要将CSS中的宽度设置为100%,因为任何比容器宽度窄的图像(如图标)都会比预期的要大得多.