4

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

4

3 回答 3

2

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

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

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

body{
background-image: url("bg.jpg") center 0 no-repeat;
}
于 2012-06-17T16:40:32.013 回答
1

你为什么不把那两张图片设置为背景图片:(很简单)

background-image: url("background_one.png"), url("background_two.png");
background-position: left top, right top;
background-repeat: no-repeat;
于 2012-06-17T06:51:51.673 回答
0

假设您的两个侧面图像各 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.
于 2012-06-17T06:36:01.223 回答