将图像浮动在父容器之外

Question

首先，我知道这看起来像是 Positioning child content outside of parent container 的副本，但它略有不同。

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

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

现在我需要用 <img /> 元素实现同样的效果。我希望实现的是这样的：

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

Answer 1

是这样的吗？

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

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

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

Answer 2

方法见下文

将图像包裹在 DIV
添加 border-radius 以获得鸡蛋形状
将值为隐藏的溢出添加到图像容器
使用比容器大的图像，这样它就会呈现出鸡蛋的形状。

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

<div id="square">

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


</div><!-- End Square -->

将图像浮动在父容器之外

Float image outside of parent container

css

image

css-position