百分比实现图片、视频、元素宽高等比缩放

2019-05-31105次阅读HTML

就是通过父容器的宽高计算出当前元素自身的大小实现宽高等比缩放,例如:图片、视频、元素等比缩放。

  • 元素的宽(百分比)= 自身宽度/容器(父)的宽*100%;
  • 元素的高(百分比)= 自身高度/容器(父)的高*100%;
  • padding/margin/left/right = 自身大小/容器(父)的宽度*100%。(即,无论是上下的间距还是左右的间距都是用自身的值/父的宽度)
  • top/bottom = 自身大小/容器(父)的高度*100%。

延伸:CSS单位em是CSS中一个比较常用的相对单位,是相对当前元素的字体大小,注意font-size是继承属性。

上一篇: window.innerHeight、innerWidth浏览器兼容解决方法  下一篇: js编码函数escape(),encodeURI(),encodeURIComponent()简介  

百分比实现图片、视频、元素宽高等比缩放相关文章