html - 全屏图像预览不会垂直调整大小

Question

我创建了一个简单的系统来预览我网站上的图片。预览以全屏 View 打开，但图像应同时调整水平和垂直大小。它确实水平调整大小，但当我尝试垂直调整它时它完全失败。

这是 fiddle :

Fiddle

在此方面，我将不胜感激。当我将 fullscreenImageContainer 设置为 100% 高度时，垂直调整大小似乎有效。问题是关闭按钮不会位于图像的右上角。

Answer 1

您需要应用/调整 4 个属性。 最大宽度、最大高度、宽度 和高度

1. width: auto; 调整宽度以保持原始纵横比 - 即不拉伸(stretch)
2. height: auto; 调整宽度以保持原始纵横比
3. max-width: 90vw; 确保对象或预览 div 永远不会超过屏幕宽度的 90%。
4. max-height: 90vh; 确保对象或预览 div 永远不会超过屏幕高度的 90%。

通过这四个组合，对象将始终完全可见，您将不需要滚动屏幕。

工作示例:(全屏打开试试垂直或水平调整大小看看效果)

body {
  background: #111;
  margin: auto;
  padding: 0;
  text-align: center;
}

.adjust {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0 auto;
}

<img class="adjust" src="https://unsplash.it/2600/2600">