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

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

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

比方说，屏幕分辨率为为360x640。

以下是我wan't图像缩放：（！相同的尺寸，但按比例缩小）

随着CSS的东西，一切都会缩放到360xSomething，即使是不需要缩放的小规模。如果屏幕像460x780那样，即使不需要，2号也会被放大！

所以这里就是我想这样做的：

而且问题：我不知道怎么会这样:(任何帮助家伙

2013-12-21 TheDuckFIN

哪里是你的代码？利润！ – JakeGould

可以实现，使用max-height:100%;和max-width:100%;

看到这个FIDDLE

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

2013-12-21 17:06:13

如何了解CSS中的屏幕分辨率？ – TheDuckFIN

@TheDuckFIN你可以在我的小提琴上看到（http://jsfiddle.net/5DLnK/4/）图片只有在屏幕较大时才适应 –

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

应用该类图像..如果舒展在小屏幕上图像:-)

谢谢拉胡尔·帕蒂尔

2013-12-21 17:09:30

你可以很容易做到这一点。而不是width:100%，请使用max-width:100%。

2013-12-21 17:09:45

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

width:100%; 
height:auto

看到这个 DEMO

2013-12-21 17:10:30 NoobEditor

回答