图像设置为适合"祖父母"，但隐藏在"父"中

Question

我有一个有点复杂的问题，

我希望IMAGE将全尺寸设置为DIV，但要隐藏到内部的另一个DIV。。

我会尽力解释：

#grandParent {
width: 100%;
height: 500px;
border: 2px solid black;
position: relative;
}
#parent {
width: 50%;
height: 100%;
overflow: hidden;
border: 1px solid red;
}
#child {
width: 100%;
height: auto;
position: absolute;
}

<div id="grandParent">
<div id="parent">
<img id="child" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg">
</div>
</div>

进行了更改^^

谢谢adv:(

Answer 1

类似的东西可能会起作用：

.grandParent {
border: 1px solid;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 500px;
height: 500px;
}
.parent {
width: 250px;
height: 250px;
overflow: hidden;
}

编辑：也许我有个更好的主意。

代码笔

Answer 2

试试这个

#grandParent {
width: 50vw;
height: 50vw;
}
#parent {
width: 25vw;
height: 25vw;
}
#parent::after {
content: '';
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: white;
}
#child {
position: absolute;
width: 50vw;
height: 50vw;
}

<div id="grandParent">
<div id="parent">
<img id="child" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg"/>
</div>
</div>

编辑

我删除了图像上的opacity: 0，并将overflow: hidden放在父元素上。我用vw来获得屏幕的百分比。尝试将代码段扩展到全屏并调整窗口大小。

编辑

我使用了一个伪元素，我认为它现在正在工作。