SVG背景宽度问题与背景大小答案

【问题标题】：Svg background width problem with background-sizeSVG背景宽度问题与背景大小
【发布时间】：2020-11-08 20:01:37
【问题描述】：

您好，我在设计中有一个宽度为 160 像素、宽度为 100% 的标题，我将它设置在一个 div 上，我将高度设置为 160 像素，当我想要但背景大小时：封面；宽度也会增加，高度也会增加，看起来像这样=>背景在底部被裁剪这是代码

  color: red;
  background-image: url(/photo.svg);
  background-repeat: no-repeat;
  height: 160px;
  background-size: cover;
}

【问题讨论】：

标签： html css svg

【解决方案1】：

尝试使用 vw（视口宽度）和 vh（视口高度）来控制元素的尺寸。

比如：

.element {
    height: 20vh; // This is 20% of the viewport height.
    width: 100vh; // This is 100% of the viewport width.
}

【讨论】：