javascript - 使用窗口动态缩放/居中图像

Question

在一个网页上，我有 5 个图像链接，布局就像骰子的第 5 个面。 4 个 Angular 都集中在中间，中心图像位于顶部(它将成为“主页”按钮)。

我已经设法让 4 个 Angular 图像保持在一起，同时保持居中并随窗口缩小(如 HERE 所示)，但我现在遇到的问题是让我的顶层图像做同样的事情

<script>
    $(window).resize(function () {
        if ($(window).width()<=1346) {
            $('.rowdiv').find('img').css({ 'width': '100%' });
        }
        else {
            $('.rowdiv').find('img').css({ 'width': '673px' });
        }
    });
    $(window).resize(function () {
        if ($(window).width()<=1346) {
            $('.rowdiv2').find('img').css({ 'width': '100%' });
        }
        else {
            $('.rowdiv2').find('img').css({ 'width': '220px' });
        }
    });
</script>

我有 2 个不同的调整大小功能是否否定了我的第二个？

Answer 1

您可以使用 CSS 媒体查询轻松实现这一目标。例如:

.rowdiv img { width: 673px; }
.rowdiv2 img { width: 220px; }

@media (max-width: 1346px) {
    .rowdiv img,
    .rowdiv2 img { width: 100%; }
}

请看这个jsFiddle demo ，或 full screen result .