Question

是否有办法如何“模仿”background-size:cover;的行为<img>（请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover）<div>内的<div style="width:100%, height=30%"> <img ng-src="{{data.imageData}}"/> </div>标记。我希望有这样的结构：

operator+

对不起，如果我不是很清楚这个话题，我不知道，怎么说得更清楚。

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属性定义元素如何响应高度和其内容框的宽度。它适用于图像，视频和其他可嵌入媒体格式与对象位置一起使用属性。对象适合使用我们可以裁剪内嵌图像让我们对它如何s and和伸展进行细致的控制在它的盒子里。

有关详细用法，请参阅link1和link2

Answer 2

您可以使用以下内容：

＆＃13;

$(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");

});

＆＃13;

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

＆＃13;

<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="">

＆＃13;

参见另一种选择：

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>

在this 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

background-size：覆盖等价物

4 个答案: