在移動網站上縮放圖像以適應屏幕

好吧，我正在爲我的網站製作一個基於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

回答