img 缩放到 div 内的视口

Question

我正在构建一个带有关闭按钮的图像灯箱。图像应缩放到其默认大小，直到达到最大 90% 的页面宽度/高度。 这适用于小于最大值的图像，上面的任何内容都会溢出容器 div。

这是我的代码笔示例： https://codepen.io/gempir/pen/eMYmyx

如何强制图片缩放？

设置

img {
    max-height: 100%;
    max-width: 100%;
}

没有帮助，因为父 div 没有固定宽度。除了使用 JS 即时计算之外，任何想法如何正确处理这种情况。

.image-overlay {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25);
  text-align: center;
  user-select: none;
  justify-content: center;
  align-items: center;
}

.image-overlay .image-container {
  display: inline-block;
  position: relative;
  max-width: 90% !important;
  max-height: 90% !important;
  background: blue;
}

.image-overlay .image-container .close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

.image-overlay .image-container img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}

<div class="image-overlay">
  <div class="image-container">
    <img src="https://picsum.photos/g/1800/1800">
    <div class="close">close</div>
  </div>
</div>

Answer 1

如果你想根据视口改变行为，你可以使用 vmin 和 vmax 来处理这个问题。

.image-overlay {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0,0,0, .25);
  text-align: center;
  user-select: none;
  justify-content: center;
  align-items: center;
  }
  .image-container {
    display: block;
    position: relative;
    background: blue;
    
  }  
    .close {
      position: absolute;
      top: 5px;
      right: 5px;
      color: white;
      background: rgba(0,0,0,0.5);
      padding: 5px;
    }
    
    img {
      display: block;
      max-width: 90vmin;
      max-height: 90vmin;

    }

<div class="image-overlay">
<div class="image-container">
  <img src="https://picsum.photos/g/1800/1800">
  <div class="close">close</div>
</div>
</div>

解释：

vmin = 最小视口尺寸的 1%（宽度或高度，等于 vh 或 vw，取决于哪个更小）

vmax = vmin 的反义词。

vmin 和 vmax 可以做什么？

您可以使用 vh 和 vw（或 % 视情况而定）调整图像大小，但有时它们在智能手机上看起来太小，因此您可以使用：

   .images{
        max-width: 90vmin;
        max-height: 90vmin;
    }
    @media(max-width:600px){
       .images{
           max-width: 90vmax;
           max-height: 90vmax;
        }
    }

它们非常适合计算机视口（甚至智能电视等），并且在智能手机上会更大一些。

Answer 2

改用视口单位：

.image-overlay {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .25);
  text-align: center;
  user-select: none;
  justify-content: center;
  align-items: center;
}

.image-overlay .image-container {
  display: inline-block;
  position: relative;
  max-width: 90% !important;
  max-height: 90% !important;
  background: blue;
}

.image-overlay .image-container .close {
  position: absolute;
  top: 5px;
  right: 5px;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px;
}

.image-overlay .image-container img {
  display: block;
  max-height: 90vh;
  max-width: 90vw;
}

<div class="image-overlay">
  <div class="image-container">
    <img src="https://picsum.photos/g/1800/1800">
    <div class="close">close</div>
  </div>
</div>

这将根据可用的实际视口限制您的图像，而不是您的图像所在的容器。

Codepen example