缩放未知大小的 SVG [英] Scaling SVG of Unknown Size
问题描述
我想在固定大小的块内显示 svg 图像.我想在块内显示未失真且尽可能大的图像.我的问题是图像是由用户提供的，所以我不知道它的尺寸.有没有办法只用 CSS 来做到这一点?
I would like to display an svg image inside a block of fixed size. I would like to show the image undistorted and as large as possible within the block. My problem is that the image is supplied by the user, so I do not know its dimensions. Is there any way to do this with CSS only?
推荐答案
不，您不能仅使用 CSS 来执行此操作.告诉浏览器如何缩放 SVG 以填充其父容器的属性在 SVG 本身中定义.有四个属性特别控制缩放:
No you cannot do this using CSS only. The attributes that tell the browser how to scale an SVG to fill its parent container are defined in the SVG itself. There are four attributes in particular that control the scaling:
宽度高度viewBoxpreserveAspectRatio
前两个可以用 CSS 覆盖，但后两个不能.如果您无法控制 SVG，则无法保证它具有 viewBox 或 preserveAspectRatio.
The first two can be overridden with CSS, but the last two cannot. If you have no control over the SVG, then you can't guarantee that it has a viewBox or preserveAspectRatio.
但是，您可以使用 Javascript 操作 viewBox 和 preserveAspectRatio 属性.
You could, however, manipulate the viewBox and preserveAspectRatio attributes with Javascript.
这篇关于缩放未知大小的 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
