有viewbox的宽高和view的宽高,宽比例和高比例不同时,怎么采取

有viewbox的宽高和view的宽高,宽比例和高比例不同时,怎么采取

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕慕子 2019-05-08 14:28:19

同学你好,对于宽高比例不同的时候, 只能根据情况选择一种合适的方法,让viewbox显示在viewport中 

分别是:1、 保持宽高比,缩放viewbox适合viewport的宽高, 如果viewport的高度小于宽度, 就让viewbox充满viewport的高度, 宽度自适应。反之就是让高度自适应。示例:

http://img1.sycdn.imooc.com//climg/5cd2765d000140e905210260.jpg

2、 保持宽高比, 让viewbox充满viewport, 超出的部分隐藏。示例:

http://img1.sycdn.imooc.com//climg/5cd276b50001917105240267.jpg

3、 不保持宽高比,  缩放viewbox充满viewport, 不会发生超出, 所以可能会发生变形。示例:

http://img1.sycdn.imooc.com//climg/5cd276cb000102b805250270.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

  • 提问者 慕用0863198 #1
    意思就是不使用宽高一致的比例而是使用svg中的 preserveAspectRatio属性,设定meet或者slice是吧
    2019-05-08 20:50:54
  • 好帮手慕慕子 回复 提问者 慕用0863198 #2
    是的, 同学的理解的很棒
    2019-05-09 09:30:53
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师