html 使用svg矢量图时无法 调整宽高问题解决,不能像图片一样设置宽高比例问题

引入的路径后加  #svgView(preserveAspectRatio(none))

具体代码如下

 修改前
<img src="@/assets/svgs/full_screen_full.svg" class="im">
修改后
<img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">

.im{
    //transform: scale(2,1); 
    width: 100px;
    height: 200px;
}



同时对于svg作为背景的情况也适用




<template>
    <div class="parent-container">
      
        <el-row  v-for="rindex of 4" :key="rindex" :id="rindex" :ref="rindex">
            <point v-for="cindex of 8" :key="cindex" :widthp="widthp" :heightp="heightp"  :sizep="sizep"  :color1="color1"  :color2="getpcolr2(rindex,cindex)"></point>
        </el-row>
    </div>
    <img src="@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))" class="im">

    <div class="svg-container">
  <svg viewBox="0 0 100 100" width="100%">
    <!-- SVG内容 -->
  </svg>
</div>

</template>




.parent-container {
  padding: 1.5%;
  display: inline-block;
  background-image: url('@/assets/svgs/full_screen_full.svg#svgView(preserveAspectRatio(none))');
  background-repeat:no-repeat;
  position: contain;
  background-size: 110% 100%;
  background-color: rgb(129, 132, 134);
}

 

相关推荐

  1. 【python】调整图像大小_自定义调整、等调整

    2024-06-08 15:18:03       33 阅读
  2. CSS设置元素的

    2024-06-08 15:18:03       35 阅读
  3. selenium-webdriver 设置 node

    2024-06-08 15:18:03       28 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-06-08 15:18:03       75 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-06-08 15:18:03       80 阅读
  3. 在Django里面运行非项目文件

    2024-06-08 15:18:03       64 阅读
  4. Python语言-面向对象

    2024-06-08 15:18:03       75 阅读

热门阅读

  1. node.js安装包

    2024-06-08 15:18:03       28 阅读
  2. 基于CycleGAN的图像风格转换

    2024-06-08 15:18:03       20 阅读
  3. C++ 纯虚函数 virtual = 0

    2024-06-08 15:18:03       33 阅读