Question

我有一个嵌套在流体布局中的图像，如下所示：

<div id="full_image">
  <div class="t">
    <div class="t_c">
      <img src="image.jpg" />
      <div id="close"></div>
    </div>
  </div>
</div>

使用CSS：

#full_image{
    position: absolute;
    background: rgba(0, 0, 0, 0.7);
    left: 0px;
    right: 0px;
    top: 0px;
    text-align: center;
    bottom: 0px;
    display: block;
    z-index: 100;
}
#full_image img{
    max-width: 90%;
    max-height: 90%;
}
#full_image #close{
    width: 32px;
    height: 32px;
    position: absolute;
    top: 10px;
    right: 10px;
    background: url('../images/close2.png');
    cursor: pointer;
}
.t{
    display: table;
    width: 100%;
    height: 100%;
    position: absolute;
}
.t_c{
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    height: 100%;
}

但是，max-width选择器上的max-height，#full_image img属性似乎只根据图像文件的尺寸更改高度。因此，例如，图像为600px x 600px，尽管#full_image分频器为300px x 300px，CSS仍会将图像大小调整为540px x 540px。

JS小提琴：http://jsfiddle.net/R8smE/2/

感谢。

Answer 1

我猜它是你想要的 http://jsfiddle.net/R8smE/6/

现在它垂直居中

.t{
    width: 100%;
    height: 100%;
    position: relative;
}

#full_image img{
    max-height: 90%;
    max-width: 90%;
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

图像CSS和相对于文件尺寸的高度而不是容器的尺寸

1 个答案: