html - 固定宽度中心，动态左右背景图像列

Question

我找到了一些方法来做我正在尝试的事情，但我不确定最好或首选的方法到底是什么......基本上我想要一个 1000px 固定宽度的#main div，然后在左侧和右侧，如果分辨率足够大，我想要两个单独的图像可以填充更多宽度，但如果不是，图像不计入文档宽度。希望这是有道理的。有什么建议么？

Answer 1

您可以制作 1400 像素宽度的背景图片（例如 bg.jpg）。将左右图像放到这个bg.jpg上。

左图到最左边，右图到 bg.jpg 的最右边。最后，您将只有 1 张图片，即 bg.jpg。

如果您的主包装是中心对齐的，那么您可以将 css 添加到正文中，因此背景图像也是中心对齐的。但主包装不会覆盖左右图像。

body{
background-image: url("bg.jpg") center 0 no-repeat;
}

Answer 2

你为什么不把那两张图片设置为背景图片：（很简单）

background-image: url("background_one.png"), url("background_two.png");
background-position: left top, right top;
background-repeat: no-repeat;

Answer 3

假设您的两个侧面图像各 200 像素宽，因此您只想在视口宽于 1400 像素时显示它们。

您可以使用 CSS 媒体查询来做到这一点。

.side-img {
    display: none;
}

@media screen and (min-width: 1400px) {
    .side-img {
        display: block;
    }
}

请记住，一些旧浏览器（IE7、8）不理解媒体查询，因此侧面图像永远不会在这些浏览器中显示。

如果这是一个问题，那么您可能更喜欢基于 JavaScript 的解决方案，类似于这个 jQuery 函数：

$(window).bind('resize',function(e){
    calcWidth(); // Called whenever window is resized.
});

function calcWidth(){    
    var sideImgs = $('.side-img');
    var winW = $(window).width();
    if (winW > 1400){
        sideImgs.css('display', 'block');
    } else {
        sideImgs.css('display', 'none');
    }
}

calcWidth();​ // Run this on page load.