php背景图片自适应网页,按背景图比例自适应和文字排版

一、问题的由来

在实际开发中为了美观，可以采用背景使用图片，文字居中排版。这个对于固定尺寸的没问题，但现在是多端，需要自适应，我们无法提前预知尺寸，只能限制在布局中，这个问题我开始使用定位来解决，发现并不完美，尤其是在多端切换时不能达到要求。如下图中左侧选择学科和右侧课本上下册都是背景图,前者文中水平垂直居中，后者文字水平居中，垂直位于下文。

二、按背景图比例自适应容器的解决方案

其实元素按背景图比例自适应容器，我在百度上找到了解决方案并进行测试，测试结课是可行的。目前没发现什么问题。

自适应布局: 使用vw、vh、em和百分比实现自适应布局

元素按背景图比例自适应容器: 利用盒模型的margin、padding和border的百分比是依据父级宽度的特性实现了。假设背景图比例是2:1，根据网上说法就是width:80%;padding-bottom:40%;这样元素宽高比较就是2:1。再通过background-size:cover就实现了元素按背景图比例自适应容器。

.banner {

width: 80%;

padding-bottom: 40%;

background-image: url(mark_back_choose.png);

background-position: center;

background-size: cover;

}