Как корректно исполнять скрипт?

Question

[Алексей Фищук]

Всем привет!
Я сделал тестовый сайт - 4.fishouk.z8.ru
Внизу сайта есть блок из кнопки и фона большой картинки. Что бы картинка растягивалась нормально на всю ширину блока я написал скрипт на jquery

$(document).ready(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
    $(window).load(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
    $(window).resize(function () {       
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });

И он работает, но когда я нажимаю на кнопку "На главную" и страница обновляется, то скрипт не срабатывает. Плиз хелп ми с этим. Бонус к карме)

Comments

[Roman Hinex]

Попробуйте ограничится CSS, лишние велосипеды не к чему

[Алексей Фищук]

Не смог на css решение найти. Все упирается в высоту блока, а сайт адаптивный. Можно конечно использовать vw, но тогда не во всех разрешениях отображается корректно

Answer 1

[Александр]

Если на css не хотите, сделайте так:

$(function(){        
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);

    $(window).resize(function () {       
        var currentHeihgt = $(document).width() * 0.625;
        $("#buttonSection").css("height", currentHeihgt);
    });
});

Comments

[Алексей Фищук]

Полностью заменил свой код этим и все-равно при нажатии кнопки "На главную" не отображает корректно

[Александр]

fishouk: всё таки не надо городить велосипеды и потом пытаться в них разобраться. Поищите в интернете готовые landing page

Answer 2

[Михаил Чирский]

У вас все равно скрипт не правильно работает, т.к картинка 1600, а у вас 1100 прибавляется, ну в данном случае лучше отказаться от JS

.buttonSection
{
background-size: cover;
height: 100%;
max-height: 1000px;
}

Cover - растянет картинку на всю ширину, а высота макс. даст тот же эффект что и с вашим скриптом

Comments

[Михаил Чирский]

А если все же на JS, сделайте ф-цию, и вызывете ее сразу, и в resize и не будет проблем.

[Алексей Фищук]

Картинку растягивает, но не контейнер, поэтому половина обрезается.

[Михаил Чирский]

fishouk: Как вариант определить на CSS точки перегиба, и для каждой задать свой к примеру, 1000 700 400 и т д, на самом маленьком разрешении можно вообще фон убрать, т.к на мобильном это лишнее. Вы действительно велосипед изобретаете, есть кучу лендинг решений, посмотрите, как они делают