0

我有这个网站正在开发中，http ://melanie.3drexstaging.com/ 客户端希望背景根据浏览器的大小放大或缩小（到一个点）。当浏览器调整大小时，我已经通过一些 jquery hacks 来调整元素的大小，但我更喜欢仅使用 css 的选项。我们有 3 张图像，一张是固定纵横比的中心图像，应该始终完整显示，左右我们有继续模式的图像。

提前感谢您的任何提示！

我的悲伤 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>
4

1 回答 1

0

您是否尝试过使尺寸相对？

您只需使用 % 而不是 px （或任何其他选项）

100% 是完整元素，50% 是元素的一半（如果你把它放在你设置为 50% 的 div 中，它会占用占据页面一半的 div 的一半，所以页面的 1/4）

否则我需要更多信息

于 2013-05-06T09:28:49.137 回答