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

【问题标题】：Scale many images on browser size (CSS / jQuery ?)在浏览器大小上缩放许多图像（CSS / jQuery？）
【发布时间】：2013-01-21 19:57:10
【问题描述】：

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

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

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

【问题讨论】：

您可以使用 CSS 百分比大小。如果图像的容器是窗口的宽度/高度，那么您的图像可能具有 33.3% 或类似的宽度。然后他们会随着页面缩放。

标签： jquery css responsive-design image-scaling

【解决方案1】：

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

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

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

【讨论】：

一开始我也有这个想法，但是问题是比例缩放。好的，我可以用 javascript - scalefactor 等计算这个，但这里不是更简单的方法吗？

【解决方案2】：

你可能想要这样的东西：

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

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

【讨论】：

他所指的站点上的图像不是根据窗口宽度而是根据窗口高度变化的。所以应该是height: XX%; width: auto;

【解决方案3】：

您可以通过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

【讨论】：