使用背景图像保持div的长宽比

Question

我有一个背景图片，背面有一个大的蓝色对角线，我们希望其中的一些内容与之对齐。

但是，在调整内容大小时，我在保持内容内联时遇到了问题（背景对角线变大或变小，使对齐方式关闭）。

当前的CSS：

  background: url('../../../img/bg.png') center no-repeat;
  background-size: cover;

无论调整大小，我可能需要保持长宽比相同吗？

https://jsfiddle.net/wb166bdo/11/

Answer 1

要保持该比率，您可以使用等于所需比率的百分比作为顶部或底部填充。 如果图片为200像素x 100像素，则填充为50％。 以％为单位的顶部和底部填充是指父MDN的宽度。