Css 响应迅速的图像，仅按比例缩小

我正在尝试解决如何使图像具有响应性，但只能缩小比例，到目前为止，我找到的所有解决方案都使用

max width:100%

或

max width:？？px

，但这些解决方案也会将图像拉伸到其父容器，这不是我想要的结果

我目前有一个jquery修复程序：

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

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

var ww=$（窗口）.width（），
iw=$（'img'）.width（）；
如果（ww

但我想一个css唯一的解决方案

---

因此，假设我有一个640px宽的图像，如果浏览器窗口比640px宽，则图像应保持640px宽，并且不会拉伸以适合其父容器，但是如果浏览器窗口比640px宽，并且只有这样，图像才能响应浏览器窗口内的大小。

它应该使用

最大宽度

，请看演示

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

---

类似的方法应该会奏效：

<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">

img{宽度：640px；}
@介质（最大宽度：640像素）
{
img{宽度：100%；}
}

好的……我正在根据你的情况完善我的答案。首先，您需要在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);
  }
});

---

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

图像大小不同，因此添加宽度：xx；将不起作用。@AnnaRiekic由于图像是动态宽度，即大小不同，因此每个元素都必须使用JavaScript动态应用内联样式“最大宽度”。@AnnaRiekic如果不想使用“最大宽度”属性单独指定每个图像，则没有纯CSS解决方案。我已经在上面使用CSS和jQuery完善了我的解决方案。尽量不要使用媒体查询，因为图像可能会有不同的大小。我确信我以前尝试过这个方法，但又尝试了一次，它似乎可以工作，非常感谢！