Как изящно ухудшить 100% изображения в DIV с отключенным JavaScript

Question

На предыдущий вопрос, который я задавал о создании DIV, где размер рассчитывается по высоте x ширине области просмотра, очень хорошо ответили здесь: Квадрат DIV, где высота равна области просмотра

У меня естьфоновое изображение, примененное к #square DIV, которое прекрасно вписывается и изменяется при включенном JavaScript.Однако, когда JavaScript выключен, фоновое изображение растягивается до ширины 100% области просмотра - я полагаю, потому что #square div не передает никакой информации о его ширине и по умолчанию принимает значение 100%.

Итак, мой вопрос: какие подходы я могу использовать, чтобы этого не произошло?Могу ли я подать #square DIV ширину по умолчанию в случае, если JavaScript выключен, но который переопределяется, когда 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 получает размеры из JQuery, не работает с отключенным JavaScript.Я рад, что представление no-JQuery является статичным, а не жидким.Заранее благодарим за все предложения.

Answer 1

Вы можете поместить класс CSS в #square div с абсолютным набором width и height, а затем в своем скрипте jQuery использовать removeClass() для #square, чтобы удалить этот класс 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');