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