Размер блока относительно изображения

167
31 октября 2018, 08:20

Имеется блок в него используя append() вставляется абсолютно позиционированное изображение и поверх еще svg. Но раз это все абсолютное соответственно высоты у родительского блока нет, как следствие ничего не видно. Решил что можно вычислить высоту элемента-изображения тоесть в моем случае img и выставить эту высоту родительскому, но загвоздка заключается в том, что на момет вычисления высоты img он пустой и высота получается 0px. Каким способом можно решить эту проблему? Можно ли узнать размер изображения до загрузки или решить как то по другому эту задачу?

p.s. Изображение растянуто на всю ширину экрана.

<div class="container-fluid interactive">
    <div class="container">
        <div class="container-svg">
            <!-- еще код некоторый -->
        </div>
    </div>
</div>
<script>
function renderBuilding(elementId, feed) {
    let svgFloors = '';
    buildingId = +elementId;
    // далее я просто собираю строку из элементов которые будут отображены в svg на странице
    $.each(feed[buildingId].entrance, function(indexEntrance, e) {
        $.each(e.floors, function(indexFloor, f) {
            svgFloors += f.svgFloor;
        });
    });
    $('.container-svg').append(`<div id="building-${buildingId}" class="container-svg-wrap building">
        <img src="${feed[buildingId].imgBuilding}">
        <svg version="1.1" data-id="${buildingId}" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 3200 1564" style="enable-background:new 0 0 2500 700;" xml:space="preserve">
            ${svgFloors}
        </svg>
    </div>`);
    let heightImage = 0;
    let checkHeightImage = setInterval(function() {
        heightImage = $('.container-svg .building img').height();
            if(heightImage > 0) {
                $('.interactive>.container, .building').css('height', heightImage);
                clearInterval(checkHeightImage);
            }
    }, 10);
}
</script>

Необходимо задать высоту вот таким селекторам .interactive>.container, .building. Пока что не придумал ничего лучше чем задачть через setInterval, но как мне кажется это прям какое-то костыльное решение.

p.s.s. все это изображение дома с наложенным поверх него svg этажей, поэтому все абсолютно (уровень знаний пока что не позволяет сделать это как то по другому)

Answer 1

Как вариант

<div>
    <img onload="this.parentNode.style.cssText = 'width:'this.offsetWidth+'px;'+'height:'+this.offsetHeight+'px;'"></img>
</div>
READ ALSO
Удаление строк из html таблицы с помоью javascript

Удаление строк из html таблицы с помоью javascript

Впервые столкнулся с js, и передо мной стоит задача: имеется таблица, в которой один столбец - форма с текстовыми полями, нужно по нажатию кнопки...

197
Проверка строки на пустоту jquery

Проверка строки на пустоту jquery

Имеется код формы

157
Как при открытие страницы сделать так чтоб она открылась на определенной позиции?

Как при открытие страницы сделать так чтоб она открылась на определенной позиции?

у меня вопросКак сделать так чтоб при открытие страницы она открылась на определенной позиции? Например по середине, как на фото

163