Question

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

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

Answer 1

你可能想要这样的东西：

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

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

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()});
});

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

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

3 个答案: