页面布局
Posted l-xjco
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面布局相关的知识，希望对你有一定的参考价值。
1、padding-bottom实现等比例缩放
原理：
1、父元素设置定位为相对定位（position: relative）
2、子元素设置定位为绝对定位（position: absolute）
3、父元素padding-bottom值为百分比时以父元素为参考，正方形时同父元素一样的百分比。
4、子元素的绝对定位会脱离文档流，设置其width、height为100%则会同父元素保持一样的比例。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale-1" /> <title>padding-bottom实现宽高等比缩放</title> <style> .imgItem { position: relative;width: 50%;padding-bottom: 50%;margin: 20px auto; } .imgItem div { position: absolute;z-index: 3; width: 100%;height: 100%; } img { width: 100%;height: 100%;object-fit: cover; } </style> </head> <body> <div class="imgItem"> <div><img src="http://img.cgypt.com/goods/2020072413573837640807.jpg" /></div> </div> <div class="imgItem"> <div><img src="http://img.cgypt.com/ad/2020052110265727783873.jpg" /></div> </div> </body> </html>
以上是关于页面布局的主要内容，如果未能解决你的问题，请参考以下文章
如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用
Spring boot：thymeleaf 没有正确渲染片段