背景尺寸：封面等效答案

【问题标题】：background-size:cover equivalent背景尺寸：封面等效
【发布时间】：2016-02-26 21:11:35
【问题描述】：

如果有办法使用<div> 内的<img> 标签“模仿”background-size:cover; 的行为（参见http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover）。我想要这样的结构：

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

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

【问题讨论】：

添加img {width:100%; height:auto;}怎么样
其中一个取决于图像及其容器的纵横比：{width: 100%; height: auto} 或 {width: auto; height: 100%}

标签： html css

【解决方案1】：

这是一个解决方案，但类似于@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

【讨论】：

正是，我一直在寻找。 @Moob 的解决方案也很有效。如果我有足够的代表，我会投票。 :)
这个例子没有使图像居中或使其垂直适合。它与将图像宽度定义为 100% 相同。见：jsfiddle.net/14fs9ckL/1 证明
是的，我同意，您可能是对的，该解决方案不会使图像居中或垂直放置。如果你看，我不需要任何这些。另一件事，它不是用于休闲网站，而是用于混合移动应用程序，并且在运行这两种解决方案时我遇到了某种错误：有时，实际上只是有时在我的图片显示在页面上之后，该页面可以滚动到左/右。我不知道为什么会发生这种情况，而且只是有时会发生。我用同一张图片尝试了很多次，但我看不出任何原理，为什么它会这样。你有什么想法吗？

【解决方案2】：

解决方案

您可以使用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 属性定义了元素如何响应高度及其内容框的宽度。它适用于图像、视频和与对象位置结合的其他可嵌入媒体格式财产。单独使用，object-fit 让我们可以通过让我们可以细粒度地控制它的挤压和拉伸方式在它的盒子里。

详细使用请参考link1和link2

【讨论】：

【解决方案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/

【讨论】：

【解决方案4】：

你可以这样使用：

$(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/

【讨论】：