解决背景图像的比例问题，我们可以使用一个跟图像比例一样的上边的内边距，把它应用在包装背景图像的元素上 …

先计算一下 … 我们要作为背景的图像，宽是 1366px，高度是 768px … 用高度除以宽度 … 得到的结果约等于 0.56 …

换算成百分比，应该就是 56% ….

打开网页的样式表 … 修改一下包装背景图像的 #showcase 的样式 …

先去掉这个固定的高度 … 然后添加一个 padding-top … 值就是刚才算出来的图像的比例 … 56% …

pt56p

保存 … 回到浏览器 …

调整窗口的宽度 … 现在的背景图像还有包装它的元素 … 就会按照一定的比例进行缩放 …

不过这里还有一个问题 …

并不是所有的图像高与宽的比例都是 56% … 解决的办法就是，把 background-size .. 设置为 cover …

意思就是 .. 背景图像会填满包装它的容器 … 并且会保持图像的比例去缩放 …

回到样式表 … 把这个 background-size:100% … 修改成 cover …

这样，如果背景图像的比例不一样 … 或者，我们使用不同的比例 … （修改 padding-top ）

背影图像都会保持原有的比例，填满整个容器显示 ….