1

Имеется блок в него используя 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 этажей, поэтому все абсолютно (уровень знаний пока что не позволяет сделать это как то по другому)

5
  • а почему нужно чтобы изображение было спозиционировано абсолютно? Commented 14 авг. 2018 в 6:02
  • задай тегу img{padding:100%;}
    – Air
    Commented 14 авг. 2018 в 6:05
  • не поможет. у родителя нулевая высота, т.к. img position: absolute; Commented 14 авг. 2018 в 6:06
  • @AndreyFedorov, лучше бы он код показал... А padding всегда помогает, ну если не процентах, так vw, vh, vmax, vmin есть....
    – Air
    Commented 14 авг. 2018 в 6:10
  • Абсолютно потому что там и изображение и svg поверх него. Проценты и относительные величины не получается использовать потому что во первых это надо подгадывать под определенное изображение. а оно может со временем поменяться и снова сидеть гадать (лично мое мнение) Commented 15 авг. 2018 в 1:48

1 ответ 1

0

Как вариант

<div>
    <img onload="this.parentNode.style.cssText = 'width:'this.offsetWidth+'px;'+'height:'+this.offsetHeight+'px;'"></img>
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.