Html 根据屏幕宽度约束比例进行调整的背景图像

我想拍一张我自己的照片（它本身不够大，不适合屏幕宽度），使它适合屏幕宽度，并相应地调整高度以保持比例（宽度：100%不会保持比例，我不希望它成为屏幕的全高，因为页面将比折叠长）

我想实现的一个例子是在中使用蓝色背景图像，您会注意到，当用户滚动时，图像本身不会移动，这是我也想实现的效果，我相信如果将图像设置为背景图像，就会实现。

听起来像

background-attachment: fixed;
background-size: contain;
background-position: top center;

---

应该将您设置为正确的方向。（信息和注意旧IEs中的限制）

也许您可以将其设置为低z索引下的绝对位置（指定顶部、左侧、右侧0px，不指定高度或底部）？在图像元素上设置

width:100%

将允许它自动调整其高度以保持比例。但您也希望高度不超过视口高度，是吗？查找

背景大小
和
背景附件
。不，我只是说我不能设置高度：100%，因为我的页面是m比视口大，但如果超出视口就可以了。那么这是否意味着我需要做的就是设置宽度：100%？这就是示例站点所做的吗？我可以用背景图像来做吗？背景大小：封面是否更好？@Terry:cover将裁剪一个维度的图像以填充另一个维度，听起来好像没有我认为背景尺寸：封面起作用了。背景尺寸：contain将图像放在文档的高度，但在侧面留下空白。