html - 使子元素覆盖父元素

Question

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

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

如果在我的 CSS 中我使用：

img{
   width: 100%;
}

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

我真正想做的是让图像覆盖整个事物。我也不想使用溢出：隐藏，因为如果图像比它的父图像大得多，图像将被剪切。我想让图像调整大小并覆盖它的父级，就像使用 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

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

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