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;但是，如果我没有那个放在那里，那么图像会从左到右调整大小并且我丢失了左边的字母。

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

P.S。我试图远离JS / JQuery。

Answer 1

如果您只想要一个解决方案，请添加body {overflow-x：hidden;然后做你的安排。干杯！

从右侧css裁剪图像

1 个答案: