背景大小：cover等效

Question

是否有一種方法可以“模仿” background-size:cover;的行為background-size:cover; （請參見http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover ），在<div>內帶有<img>標記。 我想要這樣的結構：

<div style="width:100%, height=30%">
    <img ng-src="{{data.imageData}}"/>
</div>

抱歉，如果我對這個主題不太清楚，我不知道如何更清楚地說明。

Answer 1

解

您可以使用object-fit和object-position屬性來完成此操作

將其分別設置為cover和top left

img {
  display: block;
  width:inherit;
  height: inherit;
  object-fit: cover;
  object-position: top left;
}

這些是如何工作的

這些CSS3屬性在css-tricks.com中解釋如下

object-fit屬性定義元素如何響應其內容框的高度和寬度。 它與對象位置屬性一起用於圖像，視頻和其他可嵌入的媒體格式。 本身適合使用的對象擬合功能使我們可以對其內壁如何擠壓和拉伸進行細粒度控制，從而裁剪出內嵌圖像。

有關詳細用法，請參閱link1和link2

Answer 2

您可以使用如下形式：

 $(window).load(function() { var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() { if ( (theWindow.width() / theWindow.height()) < aspectRatio ) { $bg .removeClass() .addClass('bgheight'); } else { $bg .removeClass() .addClass('bgwidth'); } } theWindow.resize(resizeBg).trigger("resize"); }); 

 #bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <img src="http://dummyimage.com/600x400/000/fff" id="bg" alt=""> 

查看其他選擇：

https://css-tricks.com/perfect-full-page-background-image/

Answer 3

您可以將圖像完全定位在div 。 使用min-width和min-height使其至少與容器一樣大。 使其負向定位，並使用margin:auto其垂直和水平居中。 最后在div上使用overflow:hidden來隱藏溢出：

 html, body { height:100%; min-height:100%; } div { border:1px solid black; width:100%; height:30%; overflow:hidden; position:relative; } div img { display:block; position:absolute; margin:auto; top:-100%; right:-100%; bottom:-100%; left:-100%; min-width:100%; min-height:100%; } 

 <div> <img src="http://lorempixel.com/400/400/" /> </div> 

在此jsFiddle中查看可能會更容易，因為您可以調整面板的大小以使其正常運行。 http://jsfiddle.net/jb40mLq3/

Answer 4

這是一個解決方案，但類似於@Moob。

div{
   width: 100%;
   height: 200px;
   position: relative;
   overflow: hidden;
}
img {
   display: block;
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
}

工作jsfiddle