Question

在网页上，我有5个图像链接，就像骰子的5面一样。 4个角落都在中间，中心图像位于顶部（它将成为“主页”按钮）。

我已经设法让4个角落的图像保持在一起，同时保持居中并缩小窗口（如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。

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

1 个答案: