Javascript 以最大宽度按比例缩放CSS中的图像

现在，我正在使用“最大宽度”来缩放图像以适应。然而，它们并不是成比例的。有没有办法导致这种情况发生？我对Javascript/jQuery持开放态度

---

如果可能，是否有一种方法可以在不知道图像原始尺寸的情况下执行此操作（可能使用Javascript/jQuery确定）？

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

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

如果前面没有宽度和高度，您可以在jQuery中尝试，但您的里程数可能会有所不同：

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

---

显然，将

#content

替换为您希望将功能范围限定到的任何选择器。

设置恒定宽度时，请使用：

height: auto

---

在图像上同时使用“宽度”和“最大宽度”将IE8拧紧

---

将宽度放在图像上，并将其包装在具有最大宽度的div中。（然后诅咒女士）

与公认的答案相反，您可以这样做，而无需在HTML中指定大小。这一切都可以在CSS中完成：

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

---

下面介绍了如何在没有Javascript的情况下实现这一点。将

最大宽度设置为所需的长度

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

当我没有在
img
标签中明确设置宽度或高度时，这对我在Mac上测试Firefox 28、Chrome 34和Safari 7是有效的

不要像一个人建议的那样，在设置了
最大宽度后，将CSS中的宽度设置为100%，因为这样一来，任何比容器宽度窄的图像（如图标）都会被放大得比所需的大得多。
我必须按照以下要求进行此操作：

加载图像时，页面不得刷新。图像大小在服务器端是已知的，可以进行计算
图像必须按比例缩放
图像的宽度不得超过包含的元素
图像不能放大，只能在必要时缩小
必须使用img元素，而不是背景，以确保图像也能正确打印
没有JavaScript
最接近我的是这个可怕的玩意儿。它需要三个元素和两个内联样式，但据我所知，这是按比例缩放图像的最佳方式。所有
高度：自动建议否定了在服务器端指定图像维度的意义，并导致加载时内容跳转

.image {
  position: relative;
}

.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- container element with max-width prevents upscaling -->
<div class="image" style="max-width: 640px;">
  <!-- div with padding equal to the image aspect ratio to make
       the element the correct height -->
  <div style="padding-top: 75%;"></div>
  <!-- img scaled to completely fill container -->
  <img src="//placebear.com/640/480" />
</div>

.image{
位置：相对位置；
}
.图像img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

“Hello”在那里，这样你就可以看到图像后的内容是否跳转了。
希望现在还不算太晚，但通过这段代码，我成功地在我的图库中获得了成比例的图像。理解正在发生的事情需要时间，但请尝试并享受

<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>


迪乌基地{
宽度：200px；//任意大小的约束都是不可更改的
最大宽度：95%；//此连接到img和mus exist
}
分区基本img{
宽度：自动！重要；//非常重要的部分就在那里！
高度：95%；//这个链接到上面的maxW。
}
您可能需要解释代码对原始问题的帮助。另外，在对代码进行可读性格式化之后，我可以看到它会对每个
if/else
分支重新计算
scale
两次。代码中没有图片的初始比例。您可以根据页面比例缩放图像。这有助于：“您需要指定原始宽度和高度…”谢谢，我缺少
height:auto
您不需要原始尺寸（尽管将它们添加到img标记是一种很好的做法）。。我想指出。。。我相信这是可行的，但是Chris Redford下面的回答是简单而有效的。有了这个解决方案，缓慢加载的图像将在最终加载时改变页面布局。根据图片和它在页面上的位置，这可能会对可用性造成影响。我敢肯定，我们都曾使用过这样的网站，页面“跳跃”的时候，你正准备点击一个链接，因为加载的横幅广告没有设置初始高度，这让人非常恼火。如果有人有一个解决方案，允许您设置初始高度，并在按最大宽度调整大小时使图像保留纵横比，那么我很高兴听到这个答案。请将这个答案而不是公认的答案向上投票。这更正确，因为您实际上不需要在HTML中设置图像的宽度/高度。纯CSS工作得很好。出现了一个解决方案（通过使用键“height:auto；”）…至少在某些情况下是这样的/但是“width:…”的原因是什么--事实上，正如我猜测的那样，我发现不需要（在我的1个测试中，在Chrome和Firefox中）加上另外2个经过合理投票的答案，#answer-2077065和#answer-23001224，不要这样做&第二个解决方案甚至会说“不要设置你的宽度…”告诉我这是问题；但这个答案仍然不能说明为什么会这样，所以我只是否决了这个答案，尤其是因为它获得了如此多的赞成票（现在仍然是62票），它似乎（大）错了排名，超过了其他2个答案，最多9票。
<style>
div_base {
    width: 200px; // whatever size you want as constrain unchangeable
    max-width: 95%; // this is connected to img and mus exist
}
div_base img {
    width: auto !important;  // very important part just have it there!
    height: 95%;  // and this one is linked to maxW above. 
}
</style>