我有一個小小的web項目。在這個頁面上，我有一些尺寸相同的圖像（360x270像素）。我想縮放瀏覽器窗口的視口大小合適的圖像。一個樣本將證明我的意思。我希望有人能幫助我。這裏是演示網站的鏈接。在瀏覽器大小上縮放許多圖像（CSS/jQuery？）
http://oscar-charlie.de/#/clients
在我的網頁，我有兩條線三個圖像。我不知道如何縮放與瀏覽器大小成比例的圖像。我的第一個想法基於jquery或css3。
你可以嘗試這樣的事情來調整圖片的大小時，窗口大小：
$(window).resize(function() {
$(".item img").css({"width": $(window).width()/3, "height": "auto"});
$(".item").css({"width": $(".item img").width(), "heigt": $(".item img").height()});
});
但你仍然會有正好填充高度或在窗口保留合適比例的寬度問題。
你可能想是這樣的：
.classforimages {
width:33%;
max-width:360px;
height:auto;
}
這將使圖像佔用其父的33％，最高爲360px寬。
他指的網站上的圖像不會根據窗口寬度而改變，而是根據窗口高度而改變。所以它應該是'height：XX％;寬度：自動;' – AvL
您可以media-queries實現這一目標：
/* Normal behavior: 4 images */
.your-img {
height: 25%;
width: auto;
}
/* If the browser window is 800px high: 3 images */
@media (max-height:800px) {
.your-img {
height: 33.3%
}
}
/* If the browser window is 600px high: 2 images */
@media (max-height:600px) {
.your-img {
height: 50%
}
}
/* If the browser window is 400px high: 1 image */
@media (max-height:400px) {
.your-img {
height: 100%
}
}
這裏是一個快速和骯髒的jsFiddle
也看看這個優秀的資源：
呦你可以使用CSS百分比大小。如果圖像的容器是窗口的寬度/高度，那麼圖像可以具有33.3％的寬度或類似的東西。然後他們會按照頁面進行縮放。 – Olical