Question

当我试图使图片可调整大小时，我有一个问题，我解释说：

我有一个适合窗口的div“叠加”;
在这个div中，我有另一个div“imgActive”，它将包含一些以窗口为中心的图片;
无论大小如何，里面的照片都必须适合窗户。

但是，正如你在this fiddle上看到的那样，里面的图片适合于水平（宽度变化），但是当你垂直调整窗口大小时，它根本不会调整大小（高度仍然相同）。 / p>

.overlay {
    background: rgba(0, 0, 0, 0.7);
    height:100%;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}
.imgActive {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    z-index: 1000;
}
.imgActive img {
    max-height: 100%;
    max-width: 100%;
}

我能做些什么让它有效？要改变高度？

感谢您的时间。

Answer 1

你可以直接在img上使用css。此方法保持图片的宽高比

<强>演示

http://jsfiddle.net/ykf6b5ot/

CSS （调整最小和最大％以适合您喜欢的图像尺寸）

img {
    max-width:70%;
    max-height: 70%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

或者您可以使用单个班级

<强> HTML

<div class="overlay">

  <img class="image" src="https://pbs.twimg.com/profile_images/471998783933251584/IF367cAS.jpeg" alt="" />

  </div>

CSS

.image {
    max-width:50%;
    max-height: 50%;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

<强>演示

http://jsfiddle.net/1w9s9wx7/

对于包装器imgActive，您与图像CSS完全相同，并调整您喜欢的高度/宽度％。 100％是全屏

<强> CSS

.imgActive {
  -webkit-transform: translate3d(0px, 0px, 0px);
    height: 50%;
    width: 50%;
    z-index: 1000;
    border:1px solid red;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

<强>演示

http://jsfiddle.net/z69t00ns/

图片的高度可调整大小问题

1 个答案: