Question

下午好，

我知道这个问题一直被问到但是我似乎找不到解决我在搜索过的任何帖子中解决问题的答案..这很多！

所以我有一个容器Div，我希望我的SVG可以扩展到（100％）。

我目前有HTML

<div class="svg-lrg">
<object data="../images/sodium-sync-1.svg" width="416px" height="164px" type="image/svg+xml"></object>
</div>

我还更改了HTML以尝试width =“100％”，并且根本没有指定宽度。

Div CSS是

.svg-lrg
{ width:100%;
height: auto;
margin: auto;
text-align: center;}

SVG信息（或者至少我认为重要的一点）

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:cc="http://creativecommons.org/ns#" 
xmlns:dc="http://purl.org/dc/elements/1.1/" 
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 416 164">

我在SVG中将宽度和高度设置为100％。

如果在谷歌控制台上进行了更改，但是在初始加载或刷新页面时它太小了，那将是奇怪的大小！

我已经尝试清除所有css样式，将它放在Div中，因为模板上的某些内容令人不安

.clear
{all: unset;}

仍然没有快乐...... 有任何想法吗？谢谢:)）

Answer 1

请使用：

HTML：

<div class="svg-lrg">
<object data="../images/sodium-sync-1.svg" width="100%" height="100%" type="image/svg+xml"></object>
</div>

将width和height同时设置为100%会将图片缩放为父级（<div>）。

PS。：您的代码无效，因为您试图缩放<div>，而不是<object>。

SVG不会扩展

1 个答案: