Css 溢出隐藏将不起作用，尽管父级的位置相对

Question

我想隐藏子容器的某些部分，这样父容器之外的所有内容都不可见（所以我的图片的一部分应该按容器的高度裁剪）

我遵循了很多论坛的回答，告诉我要把容器放到亲戚那里（我的必须是亲戚，所以这不是问题）

.img-container {
  margin : auto;
  overflow:hidden;
  width:250px;
  position: relative;
  height: 250px;
  border : 5px dotted gray;
}

.img-container object, .img-container img{
  position : absolute;
  display: inline-block;
}

.img1{
  top : 0px;
  left : 0px;
  width:60%;
}

.img2{
  width: 52%;
  left :120px;
  top:50px;
}

<div class="img-container">
  <object class='img1' data='https://svgshare.com/i/6Pz.svg'>

  </object>
  <object class='img2' data='https://svgshare.com/i/6Pz.svg'>

  </object>
</div>

https://jsfiddle.net/u0upm3j3/2/

答案：

好吧好吧...我不明白的东西：它现在可以工作了。

我做了什么？什么都没有，除了重新启动 Chrome.

感谢 D3nj、Cavdi 的回答以及 Creaforge 和 Daniel 的评论，抱歉让您耽误了一些时间。但真的，我不明白它现在和以前是如何工作的...

POS 中的示例运行良好。

Answer 1

在您的 css 上将其作为常规使用，并从图像样式中删除溢出

*, html, body {
   overflow-x: hidden;
}

Answer 2

img-container {
  margin : auto;
  overflow-x: hidden;
  overflow-y: hidden;
  width:250px;
  position: relative;
  height: 250px;
  border : 5px dotted gray;
}

.img-container object, .img-container img{
  position : absolute;
  display: inline-block;
}

.img1{
  top : 0px;
  left : 0px;
  width:60%;
}

.img2{
  width: 52%;
  left :120px;
  top:50px;
}

Css 溢出隐藏将不起作用，尽管父级的位置相对

Css overflow hidden won't work, despite position relative for parent

css

position

overflow