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

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

假设您的两个侧面图像的宽度都是200px，因此您只希望在视口宽度大于1400px时显示它们

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

---

为什么不将这两幅图像设置为背景图像：（非常简单）

---

你可以制作一个宽度为1400px的背景图像（比如bg.jpg）。将左右图像放到这个bg.jpg上

左侧图像位于bg.jpg的最左侧，右侧图像位于bg.jpg的最右侧。最后，您将只有一个图像，即bg.jpg

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

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

---

很难理解你想做什么。如果您尝试这样做，并发布一些代码，这将使我们更好地理解如果分辨率不够大，是否要在侧面隐藏这两个图像？我认为这将是最简单的解决方案，但我不希望图像位于左上角或右上角。我确实希望它位于顶部，但我希望左对齐和右对齐正好位于#main div的旁边，这样它们就可以在页面调整大小时动态移动。这是一个有趣的解决方案，我可以省去js，因为我不在乎它是否在旧浏览器中显示。我唯一的问题是，我仍然希望图像显示，比如说，如果窗口的宽度为1200，它仍然会显示100像素左右的图像，只需剪掉一半。我想在#main的#wrapper div上使用背景图像，但我不知道如何定位背景图像的左/右以动态地重新定位，并始终位于#main div的右上角。这非常有效，唯一的问题是我必须创建一个中间有1000px空白的1400x500大图像，与两个单独的200x500图像不同。。。这样看来，带宽就更大了。但是CSS是非常干净和简单的，它的行为就像我想要的，所以这是最好的解决方案！

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