扫码关注官方订阅号
一个大的背景图片和几个按钮,怎么大小适中并居中显示在各屏幕手机上?
业精于勤,荒于嬉;行成于思,毁于随。
1、背景图片的多分辨率适配,可以用CSS3属性background-size:cover; - 背景铺满元素 - 调整背景图片的宽度或高度(较小者),以铺满整个元素 - 保持背景图片的宽高比
background-size:cover;
.box { background:url() center center no-repeat; background-size:cover; }
2、按钮元素在多分辨率进行居中,可以使用CSS3属性display: flex; - 在flex容器中设置垂直居中或水平居中非常简单 - 只需要把 justify-content 和/或 align-items 设置到中间
display: flex;
.btn{ display: flex; align-items: center; justify-content: center; }
百分比长宽就好,也可以根据像素设置长宽
可以用媒体查询适配一下就好了。
可以参考bootstrap的图片响应式样式
background-size和flexbox
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
1、背景图片的多分辨率适配,可以用CSS3属性
background-size:cover;
- 背景铺满元素
- 调整背景图片的宽度或高度(较小者),以铺满整个元素
- 保持背景图片的宽高比
2、按钮元素在多分辨率进行居中,可以使用CSS3属性
display: flex;
- 在flex容器中设置垂直居中或水平居中非常简单
- 只需要把 justify-content 和/或 align-items 设置到中间
百分比长宽就好,也可以根据像素设置长宽
可以用媒体查询适配一下就好了。
可以参考bootstrap的图片响应式样式
background-size和flexbox