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

1 ответ 1

0

Как вариант

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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