代码之家 › 专栏 › 技术社区 › MarcelausZell

调整svg的大小会导致额外的高度

resize responsive-design svg css html

MarcelausZell · 技术社区 · 1 年前

我有一个交互式svg,并试图用 viewbox 和 display: flex :

// HTML
<div className="interactive-svg">
  <svg ref={svgRef} viewBox={`0 0 ${svgWidth} ${svgHeight}`} />
</div>



// CSS-Styles
.interactive-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    user-select: none;
    cursor: cell;
  }
}

但如果我缩小窗口大小,svg似乎会获得不应该存在的高度:

如果我检查元素,我会看到它会自动设置高度和宽度。如果我在检查器中删除它,就会出现预期的效果:

如何在HTML/CSS中指定它以获得所需的效果,这意味着“矩形”-svg保留了是因为弹性吗?

1 回复 | 直到 1 年前

Nenad 1 年前

Flexbox是您需要为子svg显式(重新)设置宽度和高度的原因:

.interactive-svg svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  cursor: cell;
}

推荐文章

zxcvbnm · 为什么字符串::resize和字符串::substr O(1)

3 年前

Heinz · 无法调整非模式html对话框设置style='resize:both'的大小,但可用于模式对话框

3 年前

Alex Cai · 未最大化后的AWT面板布局问题

3 年前

GoGoAllen · 如何针对所有类型的浏览器大小修复我的网页布局?

7 年前

Alberto Soto · 媒体查询加载时动态激活/禁用脚本并调整窗口大小

7 年前

Jojo Narte · 如何将UIView调整为特定的高度和宽度,包括其子视图?

7 年前

Tarzan · Python调整图像大小

7 年前

Eddy · 调整窗体大小时调整标签字体大小

7 年前

Nemo XXX · 如何在QTableView中按比例调整列宽?

7 年前

Brian Hamill · Numpy调整图像大小/重缩放图像

7 年前