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

I've found a few ways to kinda do what I'm trying, but I'm not sure what exactly is the best or preferred way to do this... basically I want to have a 1000px fixed width #main div, then on the left and right side I want to have two separate images that can fill up more width if the resolution is big enough, but if not the images don't count towards the document width. Hope that makes sense. Any suggestions?

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

3 个解决方案

#1

you can make a background image (say bg.jpg) 1400px width. put the left and right images onto this bg.jpg.

你可以制作一个背景图片(比如bg.jpg) 1400px的宽度。把左右的图片放在这个bg.jpg上。

left image goes to the left most, right image goes to the right most of bg.jpg. at the end you will only have 1 image, that is bg.jpg.

左边的图像最左边，右边的图像最右边的是bg。jpg。最后你只有一个图像，那就是bg.jpg。

if you main wrapper is center aligned, then you can add the css to body, so the background image is center align as well. but the main wrapper wont covered the left right images.

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

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

#2

Why don't you set those two images as background images: (very simple)

你为什么不把这两个图像设为背景图像呢?(非常简单)

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

#3

Lets say your two side images are 200px wide each, so you would only want to show them if the viewport is wider than 1400px.

假设您的两个副图像的宽度为200px，那么您只需要在viewport大于1400px的情况下显示它们。

You can do that with CSS media queries.

您可以通过CSS媒体查询来实现这一点。

.side-img {
    display: none;
}

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

Bear in mind that some old browsers (IE7, 8) don't understand media queries, so the side images will never display in those browsers.

请记住，一些旧浏览器(IE7, 8)不理解媒体查询，因此在那些浏览器中，侧图像永远不会显示。

If that's an issue then you might prefer a JavaScript based solution, something along the lines of this jQuery function:

如果这是一个问题，那么您可能更喜欢基于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.

#1