如何根据图像高度获取 div 高度？

Question

I have some flip boxes that need a specific height. Otherwise, it does not work.

I gave them height: 220px; for testing. But this value shouldn't be 220px , it always should be the actual proportional image height.

How is it possible to code that? Maybe with a jQuery function? Like: Get the height of the image, and add it as CSS for the container?

This is my code:

 body { font-family: Arial, Helvetica, sans-serif; } img { width: 100%; display: block; } #container { display: flex; flex-wrap: wrap; }.flip_box { background-color: transparent; width: 50%; height: 220px; perspective: 1000px; }.flip_box_inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }.flip_box:hover.flip_box_inner { transform: rotateY(180deg); }.flip_box_front, .flip_box_back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.flip_box_front { background-color: #bbb; color: black; }.flip_box_back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

 <div id="container"> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> </div>

Answer 1

You can loop through the containers, search for the image and retrieve the height, then assign it back to the container.

jQuery( window ).on( "load", function($) {
    $( ".flip_box" ).each(function( index ) {
        let imgHeight = $(this).find('img').height();
        $(this).css('height', imgHeight + 'px')
      });
});

But note that if images have different heights, it might cause a problem because you are only using the height of a single image from the container

Answer 2

After a slight delay of waiting for the photos to load, you can iterate over the flip boxes, locate their images, and set their heights to match the image height.

 const resizeFlipBoxes = () => { document.querySelectorAll('.flip_box').forEach(flipBox => { flipBox.style.height = `${flipBox.querySelector('img').offsetHeight}px`; }); }; setTimeout(resizeFlipBoxes, 1); window.addEventListener('resize', resizeFlipBoxes);

 body { font-family: Arial, Helvetica, sans-serif; } img { width: 100%; display: block; } #container { display: flex; flex-wrap: wrap; }.flip_box { background-color: transparent; width: 50%; perspective: 1000px; }.flip_box_inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }.flip_box:hover.flip_box_inner { transform: rotateY(180deg); }.flip_box_front, .flip_box_back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.flip_box_front { background-color: #bbb; color: black; }.flip_box_back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

 <div id="container"> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> </div>

Answer 3

This can be possible without JavaScript. It's enough to not specify height for <div> and it will stretch to the height of the image.

 body { font-family: Arial, Helvetica, sans-serif; } img { width: 100%; display: block; } #container { display: flex; flex-wrap: wrap; }.flip_box { background-color: transparent; width: 50%; perspective: 1000px; }.flip_box_inner { position: relative; width: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }.flip_box:hover.flip_box_inner { transform: rotateY(180deg); }.flip_box_front, .flip_box_back { width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }.flip_box_front { position: relative; background-color: #bbb; color: black; }.flip_box_back { position: absolute; background-color: dodgerblue; color: white; transform: translate(0, -100%) rotateY(180deg); }

 <div id="container"> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> <div class="flip_box"> <div class="flip_box_inner"> <div class="flip_box_front"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> <div class="flip_box_back"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/66/Nilgai_%28Boselaphus_tragocamelus%29_male.jpg/1000px-Nilgai_%28Boselaphus_tragocamelus%29_male.jpg"> </div> </div> </div> </div>