允许图像缩小，但不允许拉伸

我的网站有 4,000 多个页面，每页有 10 个或更多不同大小的 jpeg 图像。我正在努力使该网站对移动设备更加友好。为此，我希望能够缩小图像以适应较小的屏幕。我知道我可以做这样的事情来表明图像可以缩小：

img.bodyImg
{
 width: 100%;
 max-width: 357px;
 height: auto;
}

但是，如果并非所有图像的宽度都为 357（或其他），并且我不希望较小的图像超出其真实尺寸，该怎么办？为了让事情变得更有趣，如果图像标签没有指定高度和宽度属性怎么办？

我的目标是找到一种解决方案，不需要我手动调整数以万计的图像调用，但我可以进行搜索和替换。图像当前包装在 div 容器中并具有一个类，如下所示：

<div class="imgDiv"><img class="bodyImg" src="http://www.example.com/image.jpg"></div>

我也承认我以完全错误的方式处理这件事的可能性。

Using max-width https://developer.mozilla.org/en-US/docs/Web/CSS/max-width简单、有效并且不需要 JavaScript。

下面的 CSS 创建响应式图像，这些图像会缩小以适应容器的宽度，但不会超出其原始大小。

img.bodyImg {
    max-width:100%
}

在下面的演示中，两个图像的尺寸均为 300 像素 X 75 像素。第一个容器的宽度为 200 像素，第二个容器的宽度为 400 像素。请注意，第一个图像会缩小以适合容器，但第二个图像不会扩展超出其原始大小。另请注意，每个图像的比例保持准确。

div {
  background-color: #CCC;
  margin:0 0 .5em;
  padding:.25em;
}
div.one {
  width: 200px;
}
div.two {
  width: 400px;
}
img {
  display:block;
  max-width: 100%;
}

<div class="one">
  <img src="http://lorempixel.com/300/75/abstract/4/" />
</div>
<div class="two">
  <img src="http://lorempixel.com/300/75/abstract/4/" />
</div>

补充笔记

1. 我已经包括了display:block删除下降空间 http://mor10.com/removing-white-space-image-elements-inline-elements-descenders/在图像下方。
2. 如果您的图像具有特定的高度和宽度属性（因为它们可以说应该 https://stackoverflow.com/questions/1247685/should-i-specify-height-and-width-attributes-for-my-imgs-in-html#answer-1247693）， 你可以加height:auto and/or width:auto覆盖这些属性。
3. Bootstrap使用这个方法 http://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/#responsive-images对于响应式图像。