首页 > 其他分享 >svg图片大小固定,无法像普通图片可以伸展?

svg图片大小固定,无法像普通图片可以伸展?

时间:2022-11-15 11:02:38浏览次数:62  
标签:图片大小 0px svg repeat background main 伸展

<svg width="100%" height="100%" id="svg" viewBox="0 0 1440 700" xmlns="http://www.w3.org/2000/svg" class="transition duration-300 ease-in-out delay-150" preserveAspectRatio="none"><style>

 

在svg标签下加  preserveAspectRatio="none" 即可像普通图片那样。

 

 

背景图片这样设置,比如:

    #main {
        background-image: url('@/assets/main_background.svg');
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-size: 100% 100%;

    }

 

标签:图片大小,0px,svg,repeat,background,main,伸展
From: https://www.cnblogs.com/zhuangjie/p/16891665.html

相关文章

  • 界面控件DevExpress WPF拥有丰富SVG图像库,更好支持高DPI显示器
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专......
  • nuxt3批量引入svg文件
    nuxt3引入svg的方法和viet的差不多,只是细节上有些不同同样是两步,引入svg组件和引入svg文件第一步:引入svg组件在components文件夹下创建SvgIcon.vue组件<template>......
  • SVG动画之AnimatedVectorDrawable学习以及使用
    LZ-Says:伙计,一路走来,走散了一些人,留下了最真的人,切勿悲伤,切勿心寒。抬起头,微笑继续向前行~前言上一篇,我们了解了SVG以及静态Vector图像使用,坐标地址如下:​​AndroidStudy......
  • 用SVG解决移动端1px的技巧
    今天介绍一个通过svg来实现移动端1px效果的小技巧SVG的描边方式通常我们在使用一些设计软件时,描边会有三种选择,分别是内描边、居中描边和外描边,比如photoshop那么,svg中的......
  • 通过css 改变通过img标签引入的svg颜色
    前言修改svg颜色,一般直接修改文件的svg的fill属性就可以了,可以直接改svg属性,也可以通过css修改,但是前端一般都是通过img标签直接引入的svg图片,这样不管是从后期维护还是代......
  • 展示控制图片大小
    中间图片没有显示全,不设置图片高度或者设置100%即可显示全外部div控制高度,内部img高度100%这样即可实现压缩<divclass="Img"><imgsrc="pic/news_1.jpg"></div>css.zc......
  • 解决在宝塔面板IIS服务器上部署svg/woff/woff2字体的问题
    部署网站的字体和服务器IIS有什么关系?如果你的职责只限于一名前端开发,那么你可能很“幸福”地与这些问题擦肩而过,浑然不觉。可是本人一直都是孤军奋战,连开发环境都要......
  • 前端绘图方式Canvas和SVG的区别
    前端绘图方式Canvas和SVG的区别Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们。一.Canvas和SVG简介1.什么是......
  • 小程序使用svga
     svga是一种动画格式。不仅可以在ios,android,flutter,web上使用,小程序也支持。设计师使用aftereffects或是animate进行动画设计。设计师导出工具给我们svga动......
  • [FAQ] 如何从 svg 字符串创建 SVGElement
     HTML部分:<divstyle="display:none"id="svgCon"></div>JS部分:constsvgCon=document.getElementById('svgCon')svgCon.innerHTML='<svg>xxxxx';consts......