保持 div 内图像的纵横比答案

【问题标题】：Maintain aspect ratio of an image within a div保持 div 内图像的纵横比
【发布时间】：2021-03-21 22:42:09
【问题描述】：

我正在尝试制作自己的灯箱，但我无法克服的问题是父级适合图像，并保持其比例。灯箱的想法是它应该正确显示任何图像（肖像、风景），所以这不是“错误图像”的情况。

案例：我的父 div 适合纵向图片的原始宽度，同时保持 90vh 的最大高度。这会导致图片的比例失真。

项目：https://bambi007.github.io/veneer-in-shambles/

代码：

#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>

【问题讨论】：

你可以在这里发布一些代码
@JonathanIrwin 当然，刚刚编辑。谢谢！

标签： html image sass flexbox

【解决方案1】：

我提出了一种算法，可以计算图像容器的最佳宽度，以显示图像并保持其比例。可能我会在不久的将来改进它。

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';
    }

【讨论】：