html - 允许图像缩小，但不能拉伸(stretch)

Question

我的网站有 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>

我也对我以完全错误的方式处理这件事的可能性持开放态度。

Answer 1

使用 max-width简单、有效，并且不需要 JavaScript。

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

img.bodyImg {
    max-width:100%
}

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

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 来移除 descender space在图片下方。
2. 如果您的图像具有特定的高度和宽度属性(如 arguably should )，您可以添加 height:auto 和/或 width:auto 来覆盖这些属性.
3. Bootstrap uses this method用于响应式图像。