Html 当屏幕尺寸减小时，如何使图像滑离屏幕而不是缩小

目前，我有一个图像，当屏幕缩小时，图像也随之缩小并蜷缩起来。我意识到这是因为我将图像高度和宽度设置为百分比：

 <div class="container1 overlay">
            <img class="fleet" id="hero" src="./images/hero-truck-lg.jpg" alt="Mountain View">
        </div>
#hero {
  height: 100%;
  width: 100%;
  margin-left: -35px;
}

#英雄{
身高：100%；
宽度：100%；
左边距：-35px；
}

然而，在我试图模仿的网站（）上，图像从屏幕向左滑动。由于这是一个逐步下滑的过程，媒体查询似乎无法完成。然而，我对它是如何实现的感到困惑。我怎样才能复制像这个网站导航下方第一个面板上拿着手机的家伙那样逐渐从屏幕上滑下的图像呢

从网站上下载

.corp-hp--hero {
    position: relative;
    background: url(/images/corporate/hero-truck-lg.jpg) no-repeat center center;
    background-size: cover;
    background-position: 24% 71%;
    height: 500px;
}

---

您可以看到图像实际上是元素的背景，而不是

img

元素，另外，背景的位置是

24%71%

，这意味着背景将按照视图的百分比而不是恒定值进行定位，这将给人以移动的印象

考虑背景图像使其成为背景图像是否会导致其滑出屏幕？如果是线性图像，背景可能会溢出[不是好词]这意味着你只能看到图像的一部分。阅读更多信息，你就会明白；）此网站上的背景图像不会从屏幕上滑落，但最好删除

center

以避免混淆，因为你稍后会将其与背景位置重叠