使子元素覆盖父母

Question

我想要做的是让图像填充它的父元素。

<div class="parent">
    <img src="image.jpg">
</div>

如果在我的CSS中我使用：

img{
   width: 100%;
}

它会使图像填充它的父级，但只是水平，但如果图像垂直较小，则会留下空白空间。像这样：

我真正想做的是让图像覆盖整个事物。我也不想使用overflow：hidden，因为如果图像比它的父图像大，那么图像将被剪切。我想让图像调整大小并覆盖它的父级，就像使用background-size：cover一样，不同之处在于它不是CSS背景而是内部元素。

有人能帮助我吗？

谢谢。

Answer 1

您可以使用一些css和包装元素来完成此任务。应用于父代的大小仅作为示例，不需要在那里。您需要overflow:hidden。

HTML

<div class="parent">
    <div class="img-container">
        <img src="http://placehold.it/200x300"/>
    </div>
</div>

CSS

.parent{
    width:200px;
    height:300px;
    overflow:hidden;
}
.img-container{
    position:relative;
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;    
}
.img-container img{    
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
}

小提琴http://jsfiddle.net/dquN6/

改编自http://css-tricks.com/perfect-full-page-background-image/

Answer 2

如果您希望图像覆盖其父级而不保留纵横比，则只需在图像的css中添加height:100%即可。像这样：

img {
    width:100%;
    height:100%;
}