我有一张图片,宽度为 100%,高度为 600px,并设置为背景大小的封面。图像本身具有以下尺寸:
在手机和较小的平板电脑屏幕尺寸上,当我将背景位置更改为顶部、底部或中心时,图像会更改其垂直对齐方式。但是,如果我将它设置为向右或向左,它看起来是一样的。我希望图像稍微向右或向左移动并且无法确定为什么它不会在其容器内移动。
有人可以向我解释为什么在较小的屏幕尺寸上图像只能垂直移动而不是水平移动吗?
<div class="exampleDiv"></div>
<style>
.exampleDiv {
width: 100%;
background-image: url("https://picsum.photos/800/800")
background-size: cover;
background-position: left;
}
</style>