Question

我之前提出的关于创建DIV的问题，其中尺寸是根据视口的高度x宽度计算出来的，这里得到了很好的回答：Square DIV where height is equal to viewport

我有一个应用于#square DIV的背景图像，当JavaScript打开时，它可以很好地适应和调整大小。但是当JavaScript处于关闭状态时，背景图像会延伸到视口的100％宽度 - 我认为因为#square div没有被提供任何有关它应该有多宽的信息，并且默认为100％。

所以我的问题是：我可以使用哪些方法，以免发生这种情况？如果JavaScript处于关闭状态，我可以将#square DIV作为默认宽度提供，但是当JavaScript处于启用状态时会覆盖它吗？

这是JQuery（感谢上一个问题的答案）：

$(document).ready(function(){
    var height = $(window).height();
    $('#square').css('height', height);
    $('#square').css('width', (height*1.1));
});

这是CSS：

html, body, img {
    height: 100%;
    margin: 0;
    border: 0;
    padding: 0;
}

#container {
    width: 100%;
    height: 100%;
    min-width: 500px;
    min-height: 500px;
    background-color: #e0aa0e;
}

#square {
    min-width: 500px;
    min-height: 500px;
    overflow: hidden;
    background-image:url('images/bg.png');
    background-repeat: no-repeat;
    background-size:cover;
}

这是HTML：

<div id="container">
    <div id="square">
        Content within square
    </div>
</div>

我要做的是创建一个液体，可调整大小的页面，其中信息元素排列在＃square的背景图像的不同区域上 - 所以我将所有元素大小调整为#square的大小。其中，因为#square正在从JQuery获取它的大小，所以不能使用JavaScript。我很高兴no-JQuery视图是静态的而不是流动的。提前感谢所有建议。

Answer 1

您可以在#square div上放置一个CSS类，该类具有绝对width和height集，然后在您的jQuery脚本中，使用removeClass() on {{ 1}}删除那个CSS类。因此，如果没有jQuery可用，那就是设置宽度和高度，然后如果启用了jQuery，它就会变为流动。

#square

#square {
    min-width: 500px;
    min-height: 500px;
    overflow: hidden;
    background-image:url('images/bg.png');
    background-repeat: no-repeat;
    background-size:cover;
}

#square.nojavascript {
    width: 960px;
    height: 960px;
}

<div id="square" class="nojavascript">

如何在关闭JavaScript的情况下优雅降级DIV上的100％图像

1 个答案: