允许图像缩小，但不能拉伸 [英] Allowing images to shrink, but not stretch

问题描述

我的网站有4,000多页，每页有10个或更多jpeg图片，大小各异。我正在努力让网站更加适合移动设备。为此，我想让图像缩小以适应较小的屏幕。我知道我可以做这样的事情来表示图像可以缩小：

I have a site with 4,000+ pages and 10 or more jpeg images per page, of varying sizes. I'm trying to make the site more mobile friendly. To that end, i want to make it possible for the images to shrink to fit on smaller screens. I know that i can do something like this to signal that the images can shrink:

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

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

But what if not all images have a width of 357 (or whatever), and i don't want smaller images stretched beyond their true dimensions? And just to make things more fun, what if the images tags don't have height and width attributes specified?

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

My goal is to find a solution that doesn't require me to adjust tens of thousands of image calls manually, but i can do a search and replace. Images are currently wrapped in a div container and have a class, like so:

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

我也很可能完全以错误的方式解决这个问题。

I'm also open to the possibility that i'm going about this in the wrong way entirely.

推荐答案

使用 max-width 简单，有效，无需JavaScript。

Using max-width is simple, effective, and requires no JavaScript.

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

The CSS below creates responsive images that shrink to fit the container's width but won't expand beyond their native sizes.

img.bodyImg {
    max-width:100%
}

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

In the demonstration below, both images are 300px X 75px. The first container is 200px wide and the second one is 400px wide. Notice that the first image shrinks to fit in the container, but the second image does not expand beyond its native size. Also note that the proportions of each image remain accurate.

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. I已包含 display：block 删除图像下方的下降空间。


2. 如果您的图像具有特定的高度和宽度属性（因为它们可能应该），你可以添加 height：auto 和/或 width：auto 覆盖这些属性。


3. Bootstrap使用此方法获取响应式图像。

1. I've included display:block to remove the descender space below the image.
2. If your images have specific height and width attributes (as they arguably should), you can add height:auto and/or width:auto to override those attributes.
3. Bootstrap uses this method for responsive images.

这篇关于允许图像缩小，但不能拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！