0

当我尝试使图片可调整大小时遇到​​问题，我解释说：

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

但是，正如您在这个小提琴上看到的那样，里面的图片水平适合（宽度变化）但是当您垂直调整窗口大小时，它根本不会调整大小（高度仍然相同）。

.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%;
}

我该怎么做才能使它起作用？改变高度？

谢谢你的时间。

4

1 回答 1

0

您可以直接在 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/

于 2014-12-07T09:41:38.880 回答