Question

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

这是小提琴：

Fiddle

我很感激这方面的一些帮助。当我给fullscreenImageContainer 100％高度时，垂直调整大小似乎有效。问题是，关闭按钮不会位于图像的右上角。

Answer 1

您需要应用/调整4个属性。 max-width，max-height，width和height

width: auto;调整宽度以保持原始宽高比 - 即无拉伸
height: auto;调整宽度以保持原始宽高比
max-width: 90vw;可确保对象或预览div永远不会超过屏幕宽度的90％。
max-height: 90vh;可确保对象或预览div永远不会超过屏幕高度的90％。

通过这四个组合，对象将始终完全在视野中，您无需滚动屏幕。

工作示例： （全屏打开并尝试垂直或水平调整大小以查看效果）

＆＃13;

body {
  background: #111;
  margin: auto;
  padding: 0;
  text-align: center;
}

.adjust {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  margin: 0 auto;
}

＆＃13;

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

＆＃13;

Answer 2

您可以为图片使用 vh 和 vw 尺寸属性（.descCoverFullscreen .fullscreenImageContainer img），vh代表视口高度，vw代表视口宽度。

.descCoverFullscreen {
    cursor: pointer;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: black;
}

.descCoverFullscreen .fullscreenImageContainer {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: inline-block;
}

.descCoverFullscreen .fullscreenImageContainer img {
    height: 100vh;
    width: 100vw;
    max-width: 100%;
    max-height: 100%;
    position: relative;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
    top: auto;
    left: auto;
}

.descCoverFullscreen .fullscreenImageContainer button.close {
    position: absolute;
    top: 3px;
    right: 3px;
    left: auto;
    bottom: auto;
}

.remove-icon {
    width: 15px;
    height: 15px;
    stroke: #fff !important;
    stroke-width: 2;
    cursor: pointer;
}

<div class="descCoverFullscreen">
  <div class="fullscreenImageContainer">
    <img src="http://hdqwalls.com/wallpapers/think-twice-code-once.jpg">
    <button type="button" class="close" aria-hidden="true">
      <svg class="remove-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
        <g transform="translate(0,-1036.3622)">
          <path d="m 2,1050.3622 12,-12"></path>
          <path d="m 2,1038.3622 12,12"></path>
        </g>
      </svg>
    </button>
  </div>
</div>

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

2 个答案: