图像中心垂直和水平对齐，响应度高

它对Chrome有响应，但IE 10在图像大小调整时不响应。图像中心垂直和水平对齐，响应度高

以及如果图像是更大的，最初以最大宽度：100％，最大高度：100％是不工作...

的Html

<div class="wrapper"> 
    <div class="outer"> 
     <div class="imagewrap"> 
      <div class="imagefluid"> 
       <img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Dallas-Reunion.jpg" style="max-height: 100%; max-width: 100%;" alt=""/> 
      </div> 
     </div> 
    </div> 
</div>

CSS

* {margin:0;padding:0} 
html,body{height:100%} 
.wrapper{ 
    height: 100%; 
    width: 100%; 
    display: table; 
    vertical-align: middle; 
} 
.outer{ 
    display: table-cell; 
    vertical-align: middle; 
} 
.imagewrap{ 
    position: relative; 
    left: 50%; 
    float: left; 
} 
.imagefluid{ 
    position: relative; 
    text-align: right; 
    left: -50%; 
}

这是小提琴。

http://fiddle.jshell.net/a5mgS/4/

任何帮助将得到高度赞赏。

来源

2013-10-24 Tariq Jawed

你想要的东西像http://fiddle.jshell.net/PYAA7/？ –

对于'display：table'，我认为你需要像'table row'和'table cell'这样的表格来构造元素。请参阅：http：//quirksmode.org/css/css2/display.html#table – Todd

尝试：如果

.imagewrap{ 
    width:100%; 
    position:relative; 
    left:50%; 
    float:left; 
} 
.imagefluid{ 
    width:100%; 
    position:relative; 
    text-align:right; 
    left:-50%; 
} 

.imagefluid img { 
    width:100%; 
    height:auto; 
}

来源

2013-10-24 02:41:05 FuriousD

嗨，首先感谢很多，它解决了现在图像在IE中响应的第一个问题。 –

不知道它的可行与否，但可以使用引导3.应用类“IMG响应”，它会表现为你想要的。适用于所有浏览器IE8及以上版本

来源

2013-10-24 02:43:01

图像中心垂直和水平对齐，响应度高

回答

相关问题