如何将图像定位到负右位置并防止水平滚动条

Question

我一直在寻找答案，并没有发现与我的问题类似的东西。 我有3个height: 200px; width: 500px;块。在第二个区块中，我有图像，它具有负的正确位置，并且比他的容器具有更大的height。而且我不想在浏览器窗口之前看到水平滚动条＆lt;我的容器宽度。如果它不适合窗口，我想在右侧“剪切”图像。 我怎么能这样做？

JSFiddle link

.container,
.container1,
.container2 {
  height: 200px;
  width: 500px;
  margin: 0 auto;
  background: yellow;
  position: relative;
}
.container1 {
  background: blue;
}
.container2 {
  background: green;
}
.container img {
  position: absolute;
  right: -100px;
  top: -50px;
  z-index: 1;
}

<div class="container1"></div>
<div class="container">
  <img src="http://placehold.it/350x300" alt="">
</div>
<div class="container2"></div>

Answer 1

确保您的父容器（在您的情况下这是正文）具有overflow-x:hidden属性。所以你需要添加

body {overflow-x:hidden; max-width: 100%}

Answer 2

http://jsfiddle.net/g2LyLetn/2/

你是说那个意思吗？

body {
  overflow: hidden;
  max-width: 100%
}