Заголовочные контейнеры расширяются / сжимаются с изображениями

Question

Заголовочные контейнеры расширяются / сжимаются с изображениями

Я пытался решить это некоторое время и игнорировал это, но теперь я должен это исправить. Видите, когда размер окна изменяется, больше или меньше, я хочу, чтобы область заголовка пропорционально изменяла размеры с изображением заголовка, чтобы оно выглядело чистым на всех разрешениях выше 1024. У меня это работало в начальной версии, но если я адаптирую код мой контент будет за областью заголовка. Даже сейчас, когда вы изменяете размер, а затем идете в полный экран, контент находится за заголовком! Тьфу! Это такая головная боль!

http://jordan.rave5.com/tmpstuff/index.html (это тот, над которым я работаю) http://jordan.rave5.com/tmpstuff/index2.html (этот размер правильно изменяет размер...)

Я использую это, чтобы изменить размеры, но это заставляет изображение переходить размеры, а не просто "всплывать" до нужного размера. Также кажется, что элементы внезапно всплывают, и содержимое будет под ними, когда вы вернетесь в полноэкранный режим.

        // Control Shadow Size
        $(window).load(function() {

            var imageGrad = $('.image-grad'),
                image = $('#header-image-border img'),
                border = $('#header-image-border'),
                grad = $('#header-image-grad');

            function resizeDiv () {
                imageGrad.height(image.height());
                imageGrad.width($(window).width());
                grad.height(image.height());
                grad.width($(window).width());
                border.height(image.height());
                border.width($(window).width());
            }

            resizeDiv();

            $(window).resize(function() { resizeDiv(); });

        });

0

html jquery css dynamic-resizing

Источник

user1510485 28 апр '13 в 02:17

1 ответ

Решение

Другие вопросы по тегам html jquery css dynamic-resizing

user1052923 28 апр '13 в 02:31 2013-04-28 02:31 · Accepted Answer · 2013-04-28 02:31

Вам не нужен JavaScript, чтобы получить этот эффект.

Упрощенный пример:

HTML:

<header>
     <h1>Cats</h1>
</header>
<body>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum magnam eaque harum ullam earum accusantium praesentium quia a expedita voluptas inventore porro odit libero aliquid sunt culpa voluptatem! Nesciunt commodi?</p>
    ...
</body>

CSS:

header {
    background: url("//placekitten.com/800/500") black;
    background-size: 100% auto;
    background-repeat: no-repeat;
    padding: 15% 0;
}

демонстрация