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

Question

我之前问过的关于创建一个 DIV 的问题，该 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。很高兴非 JQuery 视图是静态的而不是流动的。提前感谢所有建议。

Answer 1

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

#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">

---

$('#square').removeClass('nojavascript');