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，我的图像宽度为640px，图像应该保持640px宽，而不是拉伸到适合其父容器，但如果浏览器窗口小，那么图像应该是响应在浏览器窗口内的适应性。

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

我最初会隐藏图像，因为在完全加载之前不会设置最大宽度。如果您有任何其他问题，请与我们联系。

响应式图片，仅向下缩放

3 个答案: