Имеется блок в него используя 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 этажей, поэтому все абсолютно (уровень знаний пока что не позволяет сделать это как то по другому)
img{padding:100%;}
position: absolute;
padding
всегда помогает, ну если не процентах, такvw, vh, vmax, vmin
есть....