html svg图片如何不保持横纵比

时间：2023-10-07 20:44:07浏览次数：40

图片不保持横纵比是一件很烦的事
背景图我们可以使用background-size
图片可以使用object-fit来保持横纵比

但有时svg图片要不保持横纵比
明明指定了宽高也没有用
原来矢量图天生就是锁定了横纵比

那怎么让svg不保持横纵比呢

使用preserveAspectRatio:none

<svg preserveAspectRatio="none" ...>
</svg>

下面是svg图片的展示

标签：矢量图,横纵,html,保持,svg,图片
From： https://www.cnblogs.com/adamr/p/17747438.html

HTML一键打包工具1.9.92更新发布, 支持串口通信，获取mac地址，自定义header等新功能
HTML一键打包EXE工具(HTML封装EXE,桌件)是一款神奇的工具，它可以让您把任何HTML项目(网址)变成一个独立的EXE文件，无需安装浏览器和服务器，只要双击就能运行。无论您是想制作KRPano全景VR项目，还是想开发WebGL游戏项目(Egret游戏打包,Cocos游戏打包,RPGMVMaker游戏打包)，或者是想创建......
getRefs is undefined html vue2项目报错
vue2项目提示getRefsisundefined在div上面写了，ref，还写了v-if然后再watch中操作了ref导致报错。分析：组件因为v-if为false没有注册和渲染，在操作的时候还使用了this.$refs函数就会获取不到解决办法：v-if换成v-show ......
html占位符
  普通的英文半角空格  普通的英文半角空格但不换行　 中文全角空格（一个中文宽度） &ensp;en空格（半个中文宽度） &emsp;em空格（一个中文宽度） ......
Ansible playbook实现apache批量部署,并对不同主机提供以各自IP地址为内容的index.htm
[root@ansible~]#vim/etc/ansible/hosts[webservers]10.0.0.150ansible_connection=local10.0.0.160#创建角色相关目录[root@ansiblehtml]#mkdir-pv/data/ansible/roles/httpd/{tasks,handlers,files}mkdir:createddirectory'/data/ans......
html表单与框架
1.以form开头其中常用的属性有 action="" method="" enctype="" name="" action：属性用来设置接收和处理浏览器递交的表单内容的服务器程序的URL method：属性用来定义浏览器将表单中的信息提交给服务器端的处理程序的方式，取值可以为：GET或POST. enctype：属性指示浏览......
通过freemarker与itext实现html转pdf
因果因一些合同、发票等单据需要生成pdf文档，并且审核通过后需给该pdf文档盖章，所以需要生成pdf的解决方案。实践中遇到的问题其实单独使用itext也可以实现pdf的生成，但通过文本域进行实现数据的动态替换存在局限性，如动态表格就不能友好的进行动态生成，生成了也是个绝对定位，假如文......
html 全选或全不选小案例
lf你爱好的运动是？全选/全不选足球篮球羽毛球乒乓球 <!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>lf</title><scripttype="text/javascript">functionselectAllOrNo(){varchoice=docume......
HTML+CSS随笔
这是我的学习笔记，重点是我容易忘的内容，并不全面配合以下内容学习就很全面了黑马程序员pink老师前端入门教程HTMLHTML文件基础结构解析<!DOCTYPEhtml><htmllang="zh-han"><head><metacharset="UTF-8"><metaname="viewport"content="width=devic......
htmlunit 模拟登入、点击、获取页面信息
本文介绍了htmlunit模拟登入、点击、获取页面信息的demopublicstaticStringgetHtml(Stringurl){System.out.println("****************开始执行****************");//模拟一个浏览器@SuppressWarnings("resource")WebClientwebClien......
HTML图片和文本居中对齐
原理比较简单就不上图片了你也许听说过在行元素中使用vertical-align:middle;可以实现居中对其，但实际使用上，常常没有作用。其实行元素有四条线分别是：顶线中线基线底线默认行元素是基线对齐的（两个元素的基线在同一高度）下面代码相当于图片的基线和文字的中线对齐（图片的......

html svg图片如何不保持横纵比

相关文章

赞助商

阅读排行

html svg图片 如何不保持横纵比

相关文章

赞助商

阅读排行

html svg图片如何不保持横纵比