极客教程CSS 背景图片自动等比例缩放并居中显示
在本文中，我们将介绍如何使用CSS实现背景图片的自动等比例缩放，并将其居中显示的效果。
阅读更多：CSS 教程
背景图片基础设置
在开始讲解如何实现背景图片的等比例缩放和居中显示之前，我们先来了解一下CSS中设置背景图片的基础知识。通常，我们可以通过background-image 属性来设置一个元素的背景图片。例如，下面的代码将一个名为”bg.jpg”的图片作为一个div元素的背景图片：
等比例缩放背景图片
为了实现背景图片的等比例缩放效果，我们可以使用background-size 属性。该属性可以用来设置背景图片的尺寸大小。
假设我们有一个具有宽度为300px，高度为200px的div元素，我们可以通过下面的代码将背景图片等比例地缩放到div元素的尺寸：
上述代码中的cover 值可以保证背景图片始终能够覆盖整个div元素，并且保持等比例缩放。如果我们希望完整地显示背景图片，可以使用contain 值：
背景图片居中显示
在了解了如何等比例缩放背景图片之后，我们继续学习如何将背景图片居中显示。
对于一个div元素来说，我们可以通过background-position 属性来设置背景图片的位置。默认情况下，背景图片的位置将会是左上角，我们可以使用关键字或者百分比来调整背景图片的位置。
例如，如果我们希望将背景图片水平和垂直居中，我们可以这样设置：
在上述代码中，center 值将背景图片水平和垂直居中显示。
如果我们希望仅水平居中或者垂直居中，我们可以使用center 关键字以及百分比来设置背景图片的位置。例如，下面的代码将背景图片水平居中，垂直方向上与顶部相距50%的位置：
同样地，我们也可以根据实际需要进行调整，比如将背景图片垂直居中、水平方向上与左侧相距50%的位置：
示例
下面，我们通过一个完整的示例来演示如何将背景图片等比例缩放并居中显示：
在上述示例中，我们设置了一个宽度为300px，高度为200px的div元素，将”bg.jpg”作为其背景图片，并通过设置background-size和background-position 属性将背景图片等比例缩放并居中显示。
总结
通过本文的介绍，我们学习了如何使用CSS实现背景图片的自动等比例缩放，并将其居中显示的效果。我们掌握了background-size 和background-position 属性的用法，可以根据实际需要来调整背景图片的大小和位置。希望本文对你有所帮助，使你在网页设计中能够灵活运用背景图片的显示效果。