html - 从正确的 css 裁剪图像

Question

我正在尝试在窗口调整大小时从右侧裁剪图像。如果你去 http://www.claymation.azularis.com/Work并查看横幅图片，注意将窗口从全宽调整为直到看到视频从连续 3 个变为连续 2 个，现在随着您不断调整大小，您可以向右滚动，我想删除它，但我不确定如何删除。

这是我控制图像的方式:

HTML

<header>
    <div class="header-main"><img src="myimage.jpg" alt="image missing" /></h1></div>
    <div class="clear"></div>
</header>

CSS

html body #page-wrap header {
  height: 17rem;
}
html body #page-wrap header .header-main {
  text-align: center;
  overflow: hidden;
  min-width: 102.4rem;
}
html body #page-wrap header .header-main img {
  position: relative;
  left: 100%;
  margin-left: -200%;
}

现在我完全明白这种滚动效果来自 min-width: 102.4rem; 但是，如果我没有把它放在那里，那么图像会不断地左右调整大小，我会失去左边的字母。

如何保持当前效果并去除滚动？

附言为此，我试图远离 JS/JQuery。

Answer 1

如果你只是想要一个解决方案，添加 body { overflow-x: hidden; } 然后做你的安排。干杯!