css - 背景图像 - 如何仅使用 css 正确缩放

Question

我正在开发这个网站，http://melanie.3drexstaging.com/客户希望背景根据浏览器大小放大或缩小(到一个点)。我已经通过一些 jquery hack 来在浏览器调整大小时调整元素的大小，但我更喜欢 css only 选项。我们有 3 张图片，一张是固定宽高比的中心图片，应该始终完整显示，左右两张图片延续该模式。

提前感谢您的任何提示!

我的 SAD 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>

Answer 1

你试过让大小相对吗？

你只需使用 % 而不是 px(或任何其他选项)

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

否则我需要更多信息