html - 图像设置为适合 'grandparent' 但隐藏在 'parent' 内

Question

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

我想让IMAGE设置full size到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>

进行了修改^^

感谢广告:)

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