背景图片 - 如何正确缩放，只需css

我有这个网站正在开发中，http://melanie.3drexstaging.com/ 客户端希望背景根据浏览器大小向上或向下放大（到某一点）。我已经得到它与一些jquery黑客来调整浏览器调整大小元素的中途体面的工作，但我更喜欢只有CSS选项。我们有3张图像，一张是固定宽高比的中心图像，应该始终显示整个图像，而左侧和右侧的图像会持续显示。背景图片 - 如何正确缩放，只需css

在此先感谢您的任何提示！

我悲伤的JavaScript黑客：

<script type="text/javascript"> 
    $(document).ready(function() { 
     fixBg(); 
    }); 
    $(window).load(function() { 
     fixBg(); 
    }); 
    $(window).resize(function() { 
     fixBg(); 
    }); 
    function fixBg() 
    { 
     var mh = Math.max($(window).height(), 768); 
     if ($("#ControlBar").length > 0) { 
      mh -= 54; 
     } 
     var mw = Math.round((mh/768) * 1264); 
     var winW = Math.max(1264, $(window).width()); 
     $("#bgCenter").height(mh).width(mw); 
     $("#shade").height(mh).width(mw).css("left", ((winW - mw)/2) + 10); 
     var extra = ((winW - mw)/2) + 10; 
     $(".bgFillers").width(extra).height(mh); 
     var bgw = (mh/768) * 360; 
     $(".bgFillers").css("background-size", bgw + "px " + mh + "px"); 
     //$("#siteContent").css("min-height", mh - $("#header").height() - $("#footer").height() - 20); 
    } 
</script>

的基本标记：

<div id="master"> 
    <div id="bg"> 
     <div id="bgLeft" class="bgs bgFillers"></div> 
     <div id="bgCenter" class="bgs"> 
     </div> 
     <div id="bgRight" class="bgs bgFillers"></div> 
    </div> 
    <div id="shade"></div> 
    <div id="centeredSite"> 
    </div> 
</div>

来源

2013-05-06 box86rowh

你尝试覆盖？ http://css-tricks.com/perfect-full-page-background-image/ – btevfik 2013-05-06 01:22:46

这将是伟大的，如果它是1图像，但我有3个图像，中心不重复，并在左侧和右侧是重复的图像。 – box86rowh 2013-05-06 01:25:45

你不能只用三个图像中的一个图像来使用它。我不明白为什么你需要三个图像 – btevfik 2013-05-06 01:27:20

你试图做的相对大小？

你刚才用的％代替PX（或任何其他选项）

100％完整的元素，50％是一半的元素（如果你把它放在一个div您设置为50％，它会采取一半占用了一半的页面的DIV的，所以你的页面的1/4日）

否则我需要一些更多的信息

来源

2013-05-06 09:28:49

这通常会起作用，但在我的情况下，例如整个浏览器是1500像素宽900，中间图像有一个长宽比为4：3，中间的图像将被居中，并将为1200x900以适应高度，左侧和右侧留出150像素的空间，左侧将需要填充左侧重复图像，通过右侧重复图像。如果你检查我的链接，你会看到它是3个不同的图像。 – box86rowh 2013-05-06 10:56:13

背景图片 - 如何正确缩放，只需css

回答

相关问题