Для того чтобы высота <div> стала равной высоте background-image, можно использовать несколько подходов в зависимости от ситуации.
1. Если изображение фиксированной высоты:
Если вы знаете точные размеры изображения, вы можете установить высоту <div> равной этим размерам. Например:
<style>
.my-div {
background-image: url('my-image.jpg');
background-size: cover;
height: 300px; /* высота изображения */
}
</style>
<div class="my-div"></div>
2. Если изображения имеют различные размеры:
Если вы не знаете размеры изображения заранее, можно использовать JavaScript для вычисления и применения высоты.
<style>
.my-div {
background-image: url('my-image.jpg');
background-size: cover;
}
</style>
<div class="my-div" id="myDiv"></div>
<script>
window.addEventListener('load', function() {
var img = new Image();
img.src = 'my-image.jpg';
img.onload = function() {
var div = document.getElementById('myDiv');
div.style.height = img.height + 'px';
};
});
</script>
В данном примере мы создаем новый объект Image и устанавливаем его свойство src на URL изображения. Когда изображение завершит загрузку, мы устанавливаем высоту <div> равной высоте изображения.
3. Если высота изображения должна быть адаптивной:
Если вам нужно, чтобы высота <div> автоматически адаптировалась под размеры изображения, вы можете использовать технику с проставлением относительных значений:
<style>
.my-div {
background-image: url('my-image.jpg');
background-size: cover;
width: 100%;
padding-top: 50%; /* для создания пропорциональной высоты */
position: relative;
}
.my-div::after {
content: "";
display: block;
padding-bottom: 100%; /* для сохранения пропорций изображения */
}
</style>
<div class="my-div"></div>
В этом примере мы используем padding-top для создания пропорциональной высоты. Затем мы добавляем псевдоэлемент ::after с заданным padding-bottom, чтобы сохранить пропорции изображения. Это позволяет <div> автоматически масштабироваться, сохраняя пропорции изображения.
В завершение, важно отметить, что использование заданной высоты или рассчета через JavaScript может иметь ограничения, особенно когда изображение динамически меняется или при работе с адаптивным дизайном. В таких случаях рекомендуется использовать техники адаптивного дизайна, такие как использование <img> элемента внутри <div> или использование флексбоксов, чтобы создать желаемое поведение высоты.