Question

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

不得超过窗口高度的80％。
不得超过窗口宽度的80％。
应水平和垂直居中
应该始终保持宽高比。
可能不是背景图片。
不应使用javascript进行更改。

我最大的问题是，在移动设备上检查div时，图像内的图像高度超过了窗口高度的80％（80wh）（请参阅Chrome的设备工具栏）。最奇怪的是我的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选择器通常不区分大小写；这包括类和ID选择器。确保保持一致。

垂直对齐div并使其内部适合图像

1 个答案: