Как поменять ширину блока при изменении ориентации экрана?

Question

[Марян Витак]

Нужно, чтобы высота блока всегда была равной ширине блока.
При изменении ширины все работает, но при изменении ориентации экрана изменения происходят после перезагрузки страницы.
Подскажите пожалуйста как решить данную проблему?

$(document).ready(function(){



    // height = width
    $(window).resize(function(){

        var heightRightPhoto = $('.section4__right_photo').width();
        var heightLeftPhoto = $('.section4__left').width();

        $('.section4__right_photo').css({
            'height': heightRightPhoto + 'px'
        });

        $('.section4__left').css({
            'height': heightLeftPhoto + 'px'
        });

    }); 

    $(window).resize();


    $(window).on('orientationchange', function(){

        var heightRightPhoto = $('.section4__right_photo').width();
        var heightLeftPhoto = $('.section4__left').width();

        $('.section4__right_photo').css({
            'height': heightRightPhoto + 'px'
        });

        $('.section4__left').css({
            'height': heightLeftPhoto + 'px'
        });

    });



});

Answer 1

[inkShio]

Т.е. при любом раскладе должен быть квадрат? Можно средствами css это сделать.