Html 从右侧css裁剪图像

我试图在窗口调整大小时从右侧裁剪图像。如果您转到并查看横幅图像，请注意将窗口从全宽调整为，直到您看到视频从一行3个变为一行2个，现在随着您不断调整大小，您可以向右滚动，我想将其删除，但我不确定如何删除

以下是我控制图像的方法：

HTML

现在我完全明白这个滚动效果来自

minwidth:102.4rem但是，如果我没有放在那里，那么图像会从左到右不断调整大小，我会丢失左侧的字母

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

另外，我正试图避开JS/JQuery来解决这个问题。
如果您只是想要一个解决方案，请添加body{overflow-x:hidden；}，然后进行安排。干杯
 尝试使用背景图像。你能给我一个例子，说明你如何使用背景位置来保持我的效果吗？让图像左右裁剪，直到达到1024像素，然后只调整右侧的大小？如果您只需要bada*的解决方案，请添加body{overflow-x:hidden；}，然后进行排列。B |@MehulMohan，它像一个符咒一样有效，介意把它作为一个解决方案发布，这样我就可以把它标记为正确的吗？当然：）很高兴它有效，但我认为它不是永久的解决方案。您应该关注代码质量。但如果成功了，那就不傻了
<header>
    <div class="header-main"><img src="myimage.jpg" alt="image missing" /></h1></div>
    <div class="clear"></div>
</header>

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