浮动图像在父容器之外

Question

首先，我知道这似乎与Positioning child content outside of parent container重复，但这有点不同。

如果我使用设置为background-image的绝对定位div，我只能成功地将图像浮动到其父容器之外。用于实现此目的的代码示例：

.image {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -30px;
    margin-left: -10px;
    display: block;
    height: 200px;
    width: 140px;
}

现在我需要用<img />元素来实现相同的功能。我希望实现的目标是这样的：

因此，图像实际上应该溢出在父容器的左侧和右侧。我尝试过类似的上述方法，但没有成功。有什么建议吗？

Answer 1

这样的事情？

＆＃13;

＆＃13;

.parent {
    display:inline-block;
    width: 100px;
    height: 300px;
    background-color:lightgray;
    margin-left: 100px;
}
.child {
    width: 200px;
    height:100px;
    border-radius: 100px;;
    background-color:gray;
    position:abolute; 
    margin-left: -50px;
    margin-top:100px;
}

＆＃13;

<div class='parent'>
    <img class='child'/>
</div>

＆＃13;

＆＃13;

＆＃13;

编辑：根据下面的评论，这就是我看到的

Answer 2

参见下面的方法

1. 将图像包裹在DIV中
2. 添加border-radius以实现鸡蛋般的形状
3. 向图像容器添加值为hidden的溢出
4. 使用比它的容器大的图像，这样它就会像蛋一样呈现。
＆＃13;
＆＃13;
#square {
  
  width: 300px;
  height: 300px;
  background-color: #6D9BBE;
  position: relative; /* Relative to curtail overlap */
  margin: 0 auto;
  
  
  }

#square #eggy {
  
  width: 380px;
  height: 200px;
  background-color: #8500B2;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  left: -40px;
  overflow: hidden;
  }

#eggy img {
  width: 390px
    height: 240px;
  }
＆＃13;
<div id="square">

<div id="eggy"><img src="http://s9.postimg.org/xnmcpb0jz/use_this.png"/></div><!-- End Eggy -->


</div><!-- End Square -->
＆＃13;
＆＃13;
＆＃13;