图像设置为适合“祖父母”，但隐藏在“父母”内部

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;
}

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

Code Pen

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来获取屏幕的百分比。尝试将代码段扩展到全屏并调整窗口大小。

编辑

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