允许图像缩小,但不能拉伸

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删除图像下方的下降空间.
2. 如果您的图像具有特定的高度和宽度属性(可以说它们应该是这样),您可以添加height:auto和/或width:auto覆盖这些属性.
3. Bootstrap将此方法用于响应式图像.