您现在的位置是:孟垂博自媒体博客 ✈ 学习笔记

响应式布局调整浏览器窗口的大小保证宽高比不变

09-22最后更新时间:2019-12-12已收录人已围观收藏

简介两种方式一个直接写,一个用伪类。

1.padding-top 在...上::before 伪元素使元素的高度等于其宽度的百分比。100% 因此表示元素的高度始终为100% 的宽度,创建一个响应正方形。​​​​​​​
<div class="kgb"></div>
<style>
.kgb {
  background: #333;
  width: 50%;
}
.kgb::before {
  content: '';
  padding-top: 100%;
  float: left;
}
.kgb::after {
  content: '';
  display: block;
  clear: both;
}
</style>
2.
<div class = "kgb"></div>   
<style>
.kgb {
    width: 20%; height: 0;
    padding-top: 20%;
    background: black;
}
</style>
《响应式布局调整浏览器窗口的大小保证宽高比不变.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

文档为doc格式

很赞哦! ()

文章评论

站点信息

  • 建站时间2019年06月15日
  • 网站程序:帝国CMS7.5
  • 博客模板:可免费共享
  • 文章统计:161篇文章
  • 时间卷轴时间轴
  • 标签管理标签云
  • 网站地图XML网站地图
  • 微信二维码:扫描一下,你我就是有缘