私は背景としてsvgイメージを使用しています。私はbackground-sizeでSVGイメージを伸ばしています。私はそれが横幅だけのストレッチであることを望んでいます。 Firefox、IE9 +でもchromeで完璧に動作します。どうすれば達成できるのか教えてください。私は、Firefoxだけ幅ストレッチにリサイズが、クロム、幅と高さの両方が延伸されるときクロムブラウザの背景としてsvgイメージのサイズを変更する
.homecallouts ul li {
background-image: url('blue_arow_callout.svg');
background-size: 100% 100%;
width: 21%;
height: 42px;
はjsbinコード http://jsbin.com/uvijuc/4/
参照します。私はストレッチするだけの幅が欲しいです。
SVGファイルのタグを開くためにpreserveAspectRatio = "none"を追加すると役立つのでしょうか？
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="282.05px" height="61.974px" viewBox="286.287 26.514 282.05 61.974" enable-background="new 286.287 26.514 282.05 61.974"
xml:space="preserve" preserveAspectRatio="none">
<polygon fill="#0063AF" points="538.337,26.514 286.287,26.514 316.287,57.5 286.287,88.488 538.337,88.488 568.337,57.5 "/>
</svg>
縦横比を追加するだけで、Chromeで完全に機能します。 +1 –
Ilya Streltsyn私はあなたを愛しています...真剣にあなたはおそらく私のライブを救った、ありがとう！ – Scdev
背景サイズを使用しないでください。 SVGファイルのwidth、height、preserveAspectRatioには、次の値を設定する必要があります。
<svg width="100%" height="100%" preserveAspectRatio="xMidYMid slice" viewBox="..." />
この機能を有効にするには、SVGにも有効なviewBoxが必要であることに注意してください。どのように見えるか。
のみ再びそれを答えることは動作しますので、私は、upvoteまたはコメントするのに十分な評判を持っていません。 preserveAspectRatio = "none"を追加するだけで同様のケースを解決しました。
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="591.42859"
height="250.24918"
id="svg2"
version="1.1"
preserveAspectRatio="none"
inkscape:version="0.48.2 r9819"
sodipodi:docname="background.svg">
[background-size：100％100％; Chromeで正常に動作しない]（http://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome） – Pikamander2