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

我有，当我尝试做一个画面可调整大小的问题，我解释一下：图像的高度可调整大小的问题

我有一个div“覆盖”，将适合的窗口;
在这个div里面我有另一个div“imgActive”，它将包含一些以窗口为中心的图片;
里面的这些图片必须适合窗口，不管它们的大小。

但是，正如你可以在this fiddle认为合适horizontaly（宽度变化），但是当你垂直调整窗口内的图片，这并不在所有的调整大小（高度仍然是相同的）。

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

我该怎么做才能使它工作？要改变身高？

谢谢你的时间。

来源

2014-12-07 Guillaume Breux

您可以直接在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-07 09:41:38 Tasos

非常感谢你的答案。作为即时尝试做一个小画廊插件我以为我需要这种特殊的架构（overlay> imgActive> IMG），但它似乎并没有像我thougt有用。我将删除imgActive并重写我的插件。再次感谢您的回答:) – 2014-12-07 10:47:52

没问题。还有其他一些方法，如display：block，但答案中的css大多是标准的。我可以看到的imgActive包装只有在需要另一个包含图片的内容并在页面上的特定位置移动时才有用，否则如果图库将全屏显示而不保留图片的宽高比，则不需要它 – Tasos 2014-12-07 10:59:06

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

回答

相关问题