具有img標簽的全屏圖像

Question

我正在為滑塊圖像使用img標簽，我需要圖像具有完整的寬度和高度，並在其容器內居中 。

我的問題是，當我調整窗口寬度的大小時，我的圖像變小並且其高度不跟隨窗口的高度。 我需要與background-size: cover相同的行為background-size: cover但帶有image標簽 。

background: url(../images/slider/002.jpg) center center; 
background-size: cover;

如果我將圖像設為背景，則一切正常，但滑塊無法正常工作。 我需要使用<img>標簽。 這是我的例子 。

Answer 1

有幾種方法可以使圖像通過image標簽覆蓋div ，最簡單的方法是使用object-fit屬性，如下所示：

 html,body{ margin:0; height:100%; } img{ display:block; width:100%; height:100%; object-fit: cover; } 

 <img src="http://i.imgur.com/5NK0H1e.jpg" alt=""> 

瀏覽器支持非常適合對象匹配（請參見canIuse ），但是如果您需要支持更多瀏覽器（例如IE），則可以使用此技術使用<img>標簽將圖像全屏圖像居中 ：

• 具有絕對定位的垂直和水平居中，負的上，下，左和右值以及margin:auto;
• 圖像始終以100％的min-height和min-width 覆蓋視口

演示：

 html,body{ margin:0; height:100%; overflow:hidden; } img{ min-height:100%; min-width:100%; height:auto; width:auto; position:absolute; top:-100%; bottom:-100%; left:-100%; right:-100%; margin:auto; } 

 <img src="http://i.imgur.com/5NK0H1e.jpg" alt="">