背景图像自动缩放宽度固定高度

Question

您好，我想要一个始终适合屏幕的背景图片，我的索引页面包含 2 个 div，每个 div 都有特定的背景图片。结合这 2 个 div 背景图像，我将得到一张完整的图片（每个 div bg img 得到该图片的 1/2）。问题是图片纵横比是 3:2（1200x800 分辨率）但是 background-image:cover CSS 是自动缩放宽度和高度，所以如果我有不同的纵横比（例如 16:9、4:3...） ，从 2 个 div 组合的全图不正确（每个 div bg img 的高度错误）。有什么办法可以解决这个问题吗？

Answer 1

cover 不是background-size 的唯一选项。听起来你应该这样做：

background-size:auto 100%;

这会将背景图像设置为 100% 高度，但会自动检测宽度。请注意，您也不限于百分比：

background-size:auto 500px;
background-size:auto 31.25em;

也可以。

MDN has a solid reference for all the options available.