Stack Bilder über eine zentrierte Svg

-2

Ich spiele mit Svg und Flexbox in diesem Moment und ich möchte ein Bild auf einem zentrierten Svg stapeln.Stack Bilder über eine zentrierte Svg

Das Bild sollte in der Mitte des Svg sein und ich möchte auch erreichen, dass das Bild proportional mit der Svg skaliert.

Ist es möglich, dies mit flexbox zu erreichen, oder sollte ich etwas anderes in Betracht ziehen?

HTML:

<div class="container"> 
    <div class="main"> 
    <div class="spotlight"> 
     <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" /> 
     <svg id="circle-bg" viewBox="0 0 100 100"> 
     <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle> 
     </svg> 
    </div> 
    </div> 
</div>

CSS:

body { 
    background-color: #EBEBED; 
    margin: 0; 
} 

.main { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

.spotlight { 
    width: 50vw; 
    max-height: 75vh; 
} 

.sneaker { 
    position: absolute; 
    width: 50%; 
} 

#circle-bg { 
    height: 75vh; 
}

JSFiddle: https://jsfiddle.net/hvgom8o3/

Erwartetes Ergebnis:

Quelle

2017-07-11 Y. Jacobs

Sie müssen .spotlight eine Flexbox machen:

Fiddle

body { 
 
    background-color: #EBEBED; 
 
    margin: 0; 
 
} 
 

 
.main { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.spotlight { 
 
    width: 50vw; 
 
    max-height: 75vh; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.sneaker { 
 
    position: absolute; 
 
    width: 50%; 
 
} 
 

 
#circle-bg { 
 
    height: 75vh; 
 
}

<div class="container"> 
 
    <div class="main"> 
 
    <div class="spotlight"> 
 
     <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" /> 
 
     <svg id="circle-bg" viewBox="0 0 100 100"> 
 
     <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
</div>

Quelle

2017-07-11 13:42:00 Gerard

Danke Gerard, aber mein Problem ist jetzt nur teilweise gelöst. Das Problem, das ich immer noch habe, ist, dass der Schuh nicht in der Mitte des Kreises zentriert ist und wenn ich mein Fenster verkleinere, wird es mit der SVG gruppiert. –

Für eine perfekte vertikale Ausrichtung müssen Sie das Bild anpassen. Es gibt viel Platz um den Schuh herum, wodurch es aussieht, als wäre der Schuh selbst zu niedrig positioniert. – Gerard

Es ist sowohl horizontale als auch vertikale Ausrichtung, die ich erreichen möchte, aber selbst wenn ich das Bild in Ihrem Beispiel ersetze, kann ich das nicht erreichen. –

Mit der Inspiration von Gerard und anderen Beiträgen auf Stackoverflow fand ich eine glatte Lösung.

Das Anwenden der automatischen Ränder auf das absolut positionierte Bild in Kombination mit der Einstellung von oben, rechts, unten und links auf Null hat den Trick bewirkt.

HTML:

<div class="container"> 
    <div class="main"> 
    <div class="spotlight"> 
     <img src="https://www.stadiumgoods.com/media/catalog/product/cache/1/base/1000x600/9df78eab33525d08d6e5fb8d27136e95/3/6/365054_02_1.png" alt="sneaker" class="sneaker" /> 
     <svg id="circle-bg" viewBox="0 0 100 100"> 
     <circle fill="#F8F5F5" cx="50" cy="50" r="50"></circle> 
     </svg> 
    </div> 
    </div> 
</div>

CSS:

body { 
    background-color: #EBEBED; 
    margin: 0; 
} 

.main { 
    width: 100vw; 
    height: 100vh; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
} 

.spotlight { 
    width: 50vw; 
    max-height: 75vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.sneaker { 
    position: absolute; 
    width: 70%; 
    margin: auto; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
}

Geige: http://jsfiddle.net/146t817h/1/

Quelle

2017-07-11 14:57:39

Stack Bilder über eine zentrierte Svg

Antwort

Verwandte Themen