缩放移动网站上的图像以适应屏幕

Question

好的，所以我正在为我的网站制作一个移动主题，该网站基于WordPress。我需要缩放文章中的图像以适应屏幕。好吧，我可以用CSS轻松地做到这一点（宽度：100％，高度：自动）但是这样做不正常，因为那时水平的图像会被愚蠢地缩放。

所以让我们说图像的大小：

1. 576x432
2. 432x576
3. 100x300

假设屏幕分辨率为360x640。

以下是我想要缩放的图像：

1. 360x270（相同尺寸，但按比例缩小！）
2. 360x480（相同尺寸，但按比例缩小！）
3. 100x300（未缩放，因为100 <360）

使用CSS的东西，所有东西都可以缩放到360xSomething，即使是那些不需要缩放的小东西。如果屏幕像460x780，即使不需要，也会放大2号！

所以这就是我想到的：

1. 浏览所有图片
2. 检查图像宽度是否>屏幕宽度
3. 如果是，则缩放，否则=＆gt;跳过
4. 利润！

问题：我不知道如何:(所以任何帮助人员？

Answer 1

您可以使用max-height:100%;和max-width:100%;

来实现这一目标

请参阅 FIDDLE

我在图像周围使用了示例屏幕（360x640）大小的wapper div，你可以看到只有更宽/更高的图像被缩放。

Answer 2

.image-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

将此类应用于图像..应在较小的屏幕上拉伸图像： - ）

谢谢你， Rahul Patil

Answer 3

你可以轻松实现这一目标。 而不是width:100%，请使用max-width:100%。

Answer 4

要将任何图像缩放到浏览器宽度，简单的想法是使用

width:100%;
height:auto

请参阅此 DEMO