Question

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

Answer 1

你可以制作1400px宽的背景图片（比如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

让我们说你的两个侧面图像各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.

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

3 个答案: