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

时间:2015-04-16 03:01:17

标签: html css

嗨我想要一个总是适合的背景图像,我的索引页面包含2个div,每个都有特定的背景图像。结合这两个div背景ima,我将得到一个完整的图片(每个div bg img得到该图片的1/2)。问题是图像宽高比是3:2(1200x800分辨率)但背景图像:封面CSS是自动缩放宽度和高度所以如果我有不同的宽高比(如16:9,4:3 ......) ,从2个div组合的完整图片不正确(每个div bg img的高度错误)。有没有办法解决这个问题?

1 个答案:

答案 0 :(得分:0)

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.