响应式图像，仅按比例缩小

Question

我正在尝试弄清楚如何使图像响应但只能缩小，到目前为止我找到的所有解决方案都使用 max-width:100% 或 max-width:??px 但这些也会将图像拉伸到其父级容器，这不是我想要的结果。

我目前有一个 jquery 修复：

 var ww = $(window).width(),
     iw = $('img').width();

 if(ww < iw) {
  $('img').css('width',ww - 20);
 }

但想要 css 唯一的解决方案。

假设我有一张宽度为 640px 的图像，如果浏览器 window 比 640px 宽，则图像应保持 640px 宽并且不会拉伸以适合其父容器，但如果浏览器 window较小然后图像才应该响应以适应浏览器 window.

Answer 1

应该用 max-width 来做，看演示。

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

http://jsfiddle.net/d5mLhdpp/

Answer 2

像这样的东西应该可以工作：

<style type="text/css">
img{width:640px;}

@media (max-width: 640px) 
{
    img{width:100%;}
}
</style>

<img src="https://www.google.com/images/srpr/logo11w.png">

Answer 3

好的...我正在根据您的情况完善我的答案。首先，您需要先在 css 中设置一些边界，如下所示：

img.specialClass {
  width: 100%;
}

棘手的部分来了。为了便于使用，我在这里使用 jQuery：

$('img.specialClass').each(function() {
  var $img = $(this);
  var fakeImg = new Image;
  fakeImg.src = $img.attr('src');
  fakeImg.onload = function() {
    var width = this.naturalWidth;
    $img.css('max-width', width);
  }
});

我最初会隐藏图像，因为在完全加载之前不会设置最大宽度。如果您还有其他问题，请告诉我。

响应式图像，仅按比例缩小

Responsive images, scale down only

css

image

responsive-design