Установление ширины и высоты

@Aricus · Регистрация: 29.04.2017

Author24 — интернет-сервис помощи студентам

Есть набор блоков:

HTML5

<a href="#" class="portfolio__element portfolio__element--lastRow">
    <img src="img/portfolio-android.jpg" alt="Android">
    <div class="portfolio__element__cover">
        Адаптивный сайт об играх и программах для телефонов Android. <br>
        <div class="aRound glyphicon glyphicon-link"></div>
    </div>
</a>

Задача в том, чтобы при уменьшении ширины блоков .portfolio__element уменьшалась и их высота (блоки квадратные), а так же уменьшалась ширина и высота блоков .portfolio__element__cover , появляющихся при наведении. Их ширина и высота на 62 пикселя меньше ширины внешнего блока.

Javascript

    function res(){
        var width = $('.portfolio__element').width();
        $('.portfolio__element').height(width);
        $('.col-xs-12 .portfolio__element').width(width);
        var widthInner = width - 62;
        $('.portfolio__element__cover').width(widthInner);
        $('.portfolio__element__cover').height(widthInner);
    } 
    res();
    $(window).resize(function() {
        if ($(window).width() <= '817')
        {res();}
    });

С внешним блоком всё хорошо. Например, при ширине 314 пикселей, появляется style="height: 314px;". Но при этом у внутреннего блока появляются, внимание, какие-то непонятные и разные значения style="width: 344px; height: 319px;" . Это - не переназначение: при закомментировании последних двух строк функции этот style пропадает. Притом alert($('.portfolio__element__cover').width()); после применения функции выдаёт правильное значение: 252

	11.07.2017, 03:51