jquery - 在浏览器大小上缩放许多图像（CSS / jQuery？）

Question

我有一个小的网络项目。在此页面上，我有一些尺寸相同（360x270 像素）的图像。我想为浏览器窗口的视口缩放正确大小的图像。一个样本将证明我的意思。我希望有人能帮助我。这里是演示站点的链接。

http://oscar-charlie.de/#/clients

在我的页面上，我有两行三个图像。我不知道根据浏览器大小按比例缩放图像的解决方案。我的第一个想法基于 jquery 或 css3。

Answer 1

你可能想要这样的东西：

.classforimages {
    width:33%;
    max-width:360px;
    height:auto;
}

这将使图像占据其父级的 33%，最大宽度为 360 像素。

Answer 2

您可以通过以下方式实现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

也看看这个优秀的资源：

developer.mozilla.org

www.smashingmagazine.com

Answer 3

调整窗口大小时，您可以尝试这样的方法来调整图像大小：

$(window).resize(function() {
    $(".item img").css({"width": $(window).width()/3, "height": "auto"});
    $(".item").css({"width": $(".item img").width(), "heigt": $(".item img").height()});
});

但是你仍然会遇到问题，准确地填充窗口的高度或宽度，保持正确的比例。