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

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

但是，#full_image img 选择器上的 max-width、max-height 属性似乎只会根据图像文件的尺寸。因此，例如，图片为 600px x 600px，尽管 #full_image 分隔线为 300px x 300px，但 CSS 会将图片调整为 540px x 540px。

JS fiddle :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%);
}