6

OK、私が得たのは次のとおりです。css を介して html に挿入された、幅/高さが異なる複数の svg 画像。それらをすべて同じ幅に拡大縮小したいのですが、うまくいきません (少なくとも Safari、Chrome、Firefox ではそうではありません)。

html:

<h4 class="before" id="foo">Foo</h4>
<h4 class="before" id="bar">Bar</h4>
<h4 class="before" id="foobar">Foobar</h4>

CSS:

.before:before { width: 20px; }
#foo:before { content:url('foo.svg'); }
#bar:before { content:url('bar.svg'); }
#foobar: before { content:url('foobar.svg'); }

これらの svg 画像のサイズを変更して、それぞれ 20 ピクセルの幅で表示するにはどうすればよいですか (ただし、svg 自体は変更しないでください)。

4

1 に答える 1

2

高さがどうなるかわかっている場合は、疑似要素の背景として画像を設定して を宣言できますが、疑似background-size: 20px auto;要素自体の高さの正確なサイズ以上を知る必要があります。

それ以上に、CSS だけで完全に機能させる方法を見つけることができませんでした。サーバー側のコーディングにアクセスできる場合は、SVG ファイルを開いてサイズを自動的に特定できる可能性があります。

于 2013-04-15T15:56:47.377 に答える