Question

目前我有一张图片，当屏幕缩小时，图像会随之缩小并向上收缩。我意识到这是因为我将图像高度和宽度设置为百分比：

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

然而，在我尝试模仿（https://workwave.com/）的网站上，图片从屏幕左侧滑落。由于这是一个渐进的幻灯片，它似乎没有通过媒体查询完成。但是，我很困惑它是如何实现的。如何在屏幕上逐渐复制图像，就像在本网站导航下面的第一个面板中拿着手机的人一样？ https://workwave.com/

Answer 1

来自网站

.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%，这意味着背景将按视图的百分比定位通过一个恒定的值来给出变化的印象

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

1 个答案: