保持 div 内图像的纵横比

Question

I'm trying to make my own lightbox and something that I can not get over is parent fitting to image, maintaining its ratio. The lightbox idea is that it's supposed to display any image (portrait, landscape) correctly, so this is not a 'wrong image' case.

The case: My parent div fits the portrait-oriented picture's original width while keeping a nice max-height of 90vh. Which results in disorting the picture's ratio.

The project: https://bambi007.github.io/veneer-in-shambles/

The code:

 #veneer { position: fixed; width: 100vw; height: 100vh; background: #0000008e; z-index: 10000; display: none; align-items: center; justify-content: center; &.veneer-on { display: flex; }.veneer-image-container { position: relative; max-height: 90vh; max-width: 90vw; display: flex; border: 10px solid tomato; .veneer-image { border: 10px solid white; max-width: 100%; max-height: 100%; // object-fit: contain; } } }

 <div id="veneer"> <div class="veneer-image-container"> <div id="veneer-close-button" title="close"></div> <img class="veneer-image" src="" alt=""> </div> </div>

Answer 1

I have come up with an algorithm that calculates best width of image container to display the image maintaining its ratio. Probably I will improve it in near future.

 if (veneerImage.naturalHeight > veneerImageContainer.offsetHeight) { var heightDifference = veneerImage.naturalHeight - veneerImageContainer.offsetHeight var percentage = heightDifference / veneerImage.naturalHeight * 100 var containerWidth = veneerImage.naturalWidth - (veneerImage.naturalWidth / 100 * percentage) veneerImageContainer.style.width = containerWidth + 'px'; }