从右边的css裁剪图像

debugcn 发表于 Dev

巴兹利

我正在尝试在调整窗口大小时从右侧裁剪图像。如果您访问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。

帮我

如果只需要解决方案，请添加正文{overflow-x：隐藏；}，然后进行安排。干杯!

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。