css+svg实现的定宽高比

作者: DeepKolos | 来源:发表于2019-04-28 20:02 被阅读3次

最近看到一篇关于css实现固定宽高比的思路, 最近也接触了一下svgviewBox的属性, 想到了这是很好的撑开物.

原来相同, 只是撑开的方式不同, 使用svg而不是padding

svgviewBox属性可以实现固定的比例, 然后通过width: 100%或者height: 100%;来选择哪一边当作填充, 另一边则按照比例撑开.

codepen 演示了 两种使用方式:

  1. 宽度参考, 高度等比撑开
  2. 高度参考, 宽度等比撑开
  3. 通过JS修改比例(但高度参考时, 需要手动触发一次layout, 原因未知)

这里的参考支持值由父级节点提供的.

https://codepen.io/deepkolos/pen/NmJNWv

相关文章

  • css+svg实现的定宽高比

    最近看到一篇关于css实现固定宽高比的思路, 最近也接触了一下svg的viewBox的属性, 想到了这是很好的撑开...

  • Taro构建小程序时图片自适应问题

    在开发中,图片处理要让图片随屏幕变化保持一定宽高比。在PC端,只要定高或定宽即可实现。 第一次做小程序,使...

  • glide .asBitmap()后.placeholder()

    实现瀑布流过程中使用glide来获取网络图片。现在有这么一个需求:根据图片的宽高比来设置ImageView的宽高比...

  • android自定义camera预览拉伸问题修改思路

    1.问题背景:自定义相机,实现预览,拍照等功能2.初步方案:根据屏幕宽高比,在相机预览尺寸中获取相等宽高比的。3....

  • css note

    文字间隙 letter-spacing: 3px; 换行禁止 div宽高比固定css实现 通过css实现时,需要将...

  • 木桶布局的实现原理

    一、定义 高度相同,而宽度不一样的布局 二、实现原理 1、首先设置一个基准的高度,将图片以一定的宽高比压缩至该高度...

  • 木桶布局的实现原理

    一、定义 高度相同,而宽度不一样的布局 二、实现原理 1、首先设置一个基准的高度,将图片以一定的宽高比压缩至该高度...

  • CSS如何实现固定宽高比

    常见处理方法如下: 1. 元素是img或video 首先了解下可替换元素的概念: 在 CSS 中,可替换元素(re...

  • CSS:利用padding来设置具有固定宽高比的盒子

    问题需要总结,知识需要沉淀 实现效果:固定宽高比的盒子 CSS特性:padding-bottom: 56.25%;...

  • Flutter 播放视频

    使用pub上现成的三方库实现视频播放能力,如下两种方案,硬解码方案,如播放器宽高比例与视频内容宽高比例不一致时,会...

网友评论

    本文标题:css+svg实现的定宽高比

    本文链接:https://www.haomeiwen.com/subject/gswqnqtx.html