Question

我正在开发此网站，http://melanie.3drexstaging.com/ 客户希望后台根据浏览器大小向上或向下扩展（到某一点）。当浏览器调整大小时，我已经通过一些jquery hacks来调整元素的大小，但我更喜欢css only选项。我们有3个图像，一个是固定宽高比中心图像，应该总是全部显示，而左右两侧我们有图像继续模式。

提前感谢任何提示！

我的SAD javascript hacks：

<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％是元素的一半（如果你把它放在div中你设置为50％它将占用占你页面一半的div的一半，所以1/4你的页）

否则我需要更多信息

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

1 个答案: