Html 使子元素覆盖父元素

我想做的是让一个图像填充它的父元素

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

它将使图像填充其父对象，但仅在水平方向上，但如果图像在垂直方向上较小，则会留下一个空白。像这样：

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

我真正想做的是让图像覆盖整个事情。我也不想使用overflow:hidden，因为如果图像比其父图像大很多，图像就会被剪切。我想让图像调整大小并覆盖它的父对象，就像使用background size:cover一样，区别在于这不是CSS背景，而是内部元素

有人能帮我吗

---

谢谢。

您可以使用一些css和包装器元素来实现这一点。应用于父对象的大小仅为示例，不需要存在。您需要

溢出：隐藏

HTML

拨弄

改编自
如果您希望图像覆盖其父图像而不保留纵横比，则只需在图像的css中添加高度：100%
。像这样：

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

你想让图像垂直拉伸，就像在不保留纵横比的情况下一样吗？@Asad不，我想保留纵横比，这就是为什么我没有使用高度：100%像宽度一样。你需要在切断图像的一部分和保留纵横比之间做出决定。您不能同时执行这两项操作，而仍然适合任意大小的容器（除了调整容器大小以适合图像）。
.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%;
}

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