垂直对齐 div 并将图像放入其中

Question

我想创建一个非常简单的图像查看器。单击缩略图时，该缩略图的大版本应在黑色背景上打开，不透明度为 0.8。那张图...

不得超过 window 身高的 80%。
不得超过 window 宽度的 80%。
应水平和垂直居中。
应始终保持纵横比。
可能不是背景图片。
不应更改为 javascript。

我最大的问题是，当您在移动设备上查看时，div 中图像的高度超过了 80% window 高度 (80wh)（参见 Chrome' s 设备工具栏）。最奇怪的是我的 div 工作正常：它的最大高度是 80vh...这是我的代码，也许有人看到我犯的错误：

#gallery {
    overflow: hidden;
}

.Gallery {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 10;
}

.Gallery-imageWrapper {
    max-height: 80%;
    max-width: 80%;
    position: relative;
}

.Gallery-close {
    background: rgb(21, 21, 21);
    color: rgb(255, 255, 255);
    display: block;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 20px;
}

.Gallery-image {
    max-height: 100%;
    max-width: 100%;
}

<div class="Gallery">
    <div class="Gallery-imageWrapper">
    <a class="Gallery-close" href="#" title="Sluiten">x</a>
        <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
    </div>
</div>

我在图像元素上尝试了其他 CSS 属性，例如对象适合度、宽度、高度、位置...，但似乎无法解决问题。任何人都可以帮助我吗？ :)

谢谢！

Answer 1

如果可以使用视口单位，请尝试使用 vmin - 等于 vw 和 vh 中较小的一个。

按键样式：

.Gallery-image {
  max-width: 80vmin;
  max-height: 80vmin;
}

完整演示：

.Gallery {
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.Gallery-imageWrapper {
  position: relative;
}

.Gallery-close {
  background: rgb(21, 21, 21);
  color: rgb(255, 255, 255);
  position: absolute;
  font-weight: 700;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.Gallery-image {
  max-width: 80vmin;
  max-height: 80vmin;
}

<div class="Gallery">
  <div class="Gallery-imageWrapper">
    <a class="Gallery-close" href="#" title="Sluiten">x</a>
    <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
  </div>
</div>

另外：

CSS 选择器一般不区分大小写；这包括 class 和 ID 选择器。确保保持一致。

垂直对齐 div 并将图像放入其中

Vertical align div and fit image inside it

html

css

responsive