Wie zu machen Svg Bild passt zum übergeordneten Container

Question

Ich benutze zum ersten Mal die SVG <image> Tag. Ich verwende dieses Tag, um einen Graufilter auf das Bild anzuwenden (danke IE).

Hier ist mein HTML:

<div class="container"> 
    <div class="item"> 
    <svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 
     <image xlink:href="https://dummyimage.com/400x400/000/00ffd5.png" /> 
    </svg> 
    </div> 
</div> 

Und die SCSS:

.item { 
    position: relative; 
    width: 20%; 
    height: 220px; 

    background-color: blue; 
} 

svg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 

    image { 
    width: 100%; 
    height: 100%; 
    } 
} 

ich das Bild des übergeordneten Container passen wollen. Etwas wie Hintergrund: Cover in CSS. Hat jemand eine Idee?

Sie können es heraus an: https://codepen.io/seabon/pen/QvBBrd

Der blaue Hintergrund ist für div.item

Answer 1

• width="100%" und height="100%" Attribute hinzufügen AKTUALISIERT.
• hinzufügen preserveAspectRatio mit dem Wert von none.

  keine keine einheitliche Skalierung erzwingen. Skalieren Sie den Grafikinhalt des gegebenen Elements ggf. ungleichmäßig, sodass die Bounding Box des Elements exakt mit dem Viewport-Rechteck übereinstimmt.
  Hinweis: Wenn <align> keine ist, wird der optionale Wert <meetOrSlice> ignoriert.

jsFiddle - getestet auf Chrome, FF und IE11

.item { position: relative; width: 20%; height: 220px; background-color: blue; } 
 
svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

<div class="item"> 
 
    <svg id="theSVG" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"> 
 
     <image width="100%" height="100%" xlink:href="//dummyimage.com/400x400/000/00ffd5.png" preserveAspectRatio="none" /> 
 
    </svg> 
 
</div>

---

Hinweise:

und es wurde gelöscht, dass beantworten das Attribut preserveAspectRatio="xMidYMid slice" war aber ohne die width="100%" height="100%" zu verwenden, außer denen -

Die Verwendung dieses preserveAspectRatio Attribut wurde zunächst durch eine andere Antwort angeboten - vielen Dank an ihn, obwohlIch habe vergessen, den Benutzer, in CSS, die nicht funktionieren außer [teilweise, weil, wenn Sie die Größe der Größe größer ändern wird der blaue Hintergrund beginnen,] in Chrome angezeigt, wie in @Paul LeBeau Antwort angegeben. Diese jsFiddle Demo stellt dar, wie diese nette Antwort war.

none tut nicht Kraft der Waage in Uniform zu sein, kann es das Bild zerquetschen oder dehnt, um es passend zu machen, während es keinen Unterschied in dem OP Fall machen, wenn Keeping Seitenverhältnis erforderlich ist, dann jeder the otherMin, Mid und Max für x oder y könnte verwendet werden, aber es muss nur und nicht meet mit slice begleitet werden.

Answer 2

Wenn Sie auf die Registerkarte Bild nicht verwenden es ist meine Lösung mit CSS:

.item-image{ 
width:100%; 
height:100%; 
background: url(https://dummyimage.com/400x400/000/00ffd5.png) center; 
background-size: 100% 100% ; 
} 

- vergessen Sie nicht create div mit der Item-Image-Klasse, zwischen SVG-Tags.

Codepen

There ist eine Website, wo Sie mit Hintergrund-Format abspielen kann. Sie können den Hintergrund jedes Elements ändern, indem Sie div eine ID zuweisen und ein Attribut mit JS hinzufügen.

Answer 3

Setzen Sie einfach ein entsprechendes viewBox Attribut auf Ihrem SVG. Setzen Sie dann preserveAspectRatio auf einen Wert, der die slice-Option anstelle der Standard meet verwendet. Zum Beispiel:

preserveAspectRatio="xMidYMid slice" 

Dies entspricht CSS background-size: cover.

BTW, Einstellung width und height der <image> über CSS wird nur in Chrome jetzt funktionieren. Sie müssen diese im SVG zuweisen, wenn Ihr Beispiel in anderen Browsern funktionieren soll.

.item { 
 
    position: relative; 
 
    width: 20%; 
 
    height: 220px; 
 

 
    background-color: blue; 
 
} 
 

 
svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="item"> 
 
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice"> 
 
     <image xlink:href="https://dummyimage.com/400x400/000/00ffd5.png" 
 
       width="400" height="400"/> 
 
    </svg> 
 
    </div> 
 
</div>