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

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%
}

在下面的演示中，两张图片都是 300 像素 X 75 像素。第一个容器是 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 用于响应式图片。

Answer 2

您可以使用一点 jQuery 来 figure out each image's native width，然后为每个图像设置 perscriptive max-widths：

$('.bodyImg').each(function() {

  // Create new offscreen image to test
  var theImage = new Image();
  theImage.src = $(this).attr("src");

  // Get accurate measurements from that.
  var imageWidth = theImage.width;

  $(this).css({
    "max-width" : imageWidth
  });


}

更新：如果您希望每个图像具有统一的宽度，您可以存储最小的最大宽度并将其应用于所有图像：

var smallMax;
$('.bodyImg').each(function() {

  // Create new offscreen image to test
  var theImage = new Image();
  theImage.src = $(this).attr("src");

  // Get accurate measurements from that.
  var imageWidth = theImage.width;

  // if the variable exists and is bigger than
  // the current width, use the new max width
  if (smallMax !== undefined && smallMax > imageWidth) {
    smallMax = imageWidth;
  }
  // set the variable if it hasn't been set yet
  else if (smallMax == undefined) {
    smallMax = imageWidth;
  }
  // keep the old variable if it is defined and smaller
  else {}


  $(this).css({
    "max-width" : smallMax
  });


}

Answer 3

为什么不只是：

max-width:100%; /*Ensure the width scales to the width of the parent container*/
width:auto; /* Not required, but sometimes is nice to ensure the width not being overridden by other factors like browser quirks */
height: auto; /*Ensure the image keeps its ratio*/

Answer 4

尝试在您的 CSS 中使用 max-width:100% and height: auto。如果您想让您的网站对移动设备友好，我建议您研究引导框架以获得更大的灵活性。