当前位置: 代码迷 >> 综合 >> css 中计算图片占屏幕高度的百分之几 缩放不变形
  详细解决方案

css 中计算图片占屏幕高度的百分之几 缩放不变形

热度:24   发布时间:2024-02-19 23:11:25.0
vw
css3新单位,view width的简写,是指可视窗口的宽度。假如宽度是1200px的话。那10vw就是120px
举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。vh
css3新单位,view height的简写,是指可视窗口的高度。假如高度是1200px的话。那10vh就是120px
举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。vm
css3新单位,相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm 举个例子:浏览器高度900px,宽度1200px,取最小的浏览器高度,1 vm = 900px/100 = 9 px。

关于height:100%和height:100vh的区别

vh就是当前屏幕可见高度的1%,也就是说

height:100vh == height:100%;

但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,

但是设置height:100vh,该元素会被撑开屏幕高度一致。

 

css图片按比例缩放不变形

<img style="max-width:80px;max-height:80px;">

 

  相关解决方案