Question

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

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

如何强制缩放图像？

设置

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

无效，因为父div没有固定宽度。任何想法如何正确处理这种情况，除了使用JS进行动态计算。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

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

img缩放到div内的视口

2 个答案: