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。请注意，第一个图像缩小以适合容器，但第二个图像不会扩展超出其原始大小。另请注意，每张图像的比例仍然准确。

＆＃13;

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

＆＃13;

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

＆＃13;

附加说明

我已将display:block包括在内，以移除图片下方的descender space。
如果您的图片具有特定的高度和宽度属性（与arguably should一样），则可以添加height:auto和/或width:auto来覆盖这些属性。
Bootstrap uses this method用于响应式图片。

Answer 2

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

if let dict = myDict {
    if let 
      highScore = dict.objectForKey("HighScore"), 
      completedTutorial = dict.objectForKey("HasCompletedTutorial") 
    {
        return (Int(highScore as! NSNumber), Bool(completedTutorial as! NSNumber))
    }
}

更新：如果您希望每张图片的宽度均匀，您可以存储最小的最大宽度并将其应用于所有图片：

$('.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
  });


}

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。如果你想让你的网站移动设备友好，我建议你研究一下bootstrap框架以获得更大的灵活性。

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

4 个答案: