background-size：cover equivalent

如果在<div>的内部如何“模仿”background-size:cover;（请参阅http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover）与<img>标记的行为。我想有结构是这样的：background-size：cover equivalent

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

对不起，如果我不是的话题很清楚，我不知道，如何把它更加清晰。

来源

2015-11-24 Maroš Šeleng

有关添加'IMG {宽度什么：100％; height：auto;}' – Chris

其中之一取决于图像及其容器的宽高比：'{width：100％; height：auto}'或'{width：auto;身高：100％}' –

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

来源

2015-11-24 12:59:02

就是这样，我一直在寻找。 @ Moob的解决方案也在工作。如果我有足够的代表，我会赞成。 :) –

此示例不会将图像居中放置*或*使其垂直放置。它与将图像宽度定义为100％相同。请参阅：https：//jsfiddle.net/14fs9ckL/1/证明 – Moob

...和https://jsfiddle.net/14fs9ckL/3/ – Moob

您可以使用这样的事情：

$(window).load(function() {  
 

 
\t var theWindow  = $(window), 
 
\t  $bg    = $("#bg"), 
 
\t  aspectRatio  = $bg.width()/$bg.height(); 
 
\t  \t \t \t  \t \t 
 
\t function resizeBg() { 
 
\t \t 
 
\t \t if ((theWindow.width()/theWindow.height()) < aspectRatio) { 
 
\t \t  $bg 
 
\t \t  \t .removeClass() 
 
\t \t  \t .addClass('bgheight'); 
 
\t \t } else { 
 
\t \t  $bg 
 
\t \t  \t .removeClass() 
 
\t \t  \t .addClass('bgwidth'); 
 
\t \t } 
 
\t \t \t \t \t 
 
\t } 
 
\t      \t \t \t 
 
\t 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/

来源

2015-11-24 12:25:26

可以内div绝对定位的形象。使用min-width和min-height使其至少与其容器一样大。给它定位并使用margin:auto垂直和水平居中。最后使用overflow:hidden的div来隐藏溢出：

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/

来源

2015-11-24 12:30:27 Moob

解决方案

您可以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解释如下

目的配合属性定义的元素如何响应其内容框的高度和宽度。它旨在将其他可嵌入媒体格式的图像，视频和与对象位置属性结合使用。对象适合让我们通过裁剪一个内嵌图像，使我们能够细密地控制它在框内如何挤压和拉伸。

有关详细的使用，指link1和link2

来源

2015-11-24 12:40:10

background-size：cover equivalent

回答

相关问题