圖像中心垂直和水平對齊，響應度高

它對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

圖像中心垂直和水平對齊，響應度高

回答

相關問題