在中心svg上堆疊圖像

-2

我在此時正在玩svg和flexbox，我想將圖像堆疊在居中svg的頂部。在中心svg上堆疊圖像

圖像應該位於svg的中心，我還想完成圖像與svg成比例的縮放比例。

是否有可能使用flexbox來完成此操作，還是應該考慮其他方法？

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/

預期結果：

來源

2017-07-11 Y. Jacobs

你需要做一個.spotlight Flexbox的：

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>

來源

2017-07-11 13:42:00 Gerard

謝謝傑拉德，但我的問題是，現在只是部分解決。我仍然有一個問題，那就是鞋子不在圓圈中間，當我調整窗口大小時，它與svg分組在一起。 –

要獲得完美的垂直對齊，您需要調整圖像。鞋子周圍有很多空間，使得它看起來像鞋子本身的位置太低。 – Gerard

這是我想要實現的水平和垂直對齊方式，但即使在替換示例中的圖像時，我也無法實現這一點。 –

隨着傑拉德的靈感和其他職位＃2我發現了一個順利解決。

將絕對定位圖像應用於自動頁邊空白，並將頂部，右側，底部和左側設置爲零，這一技巧。

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; 
}

小提琴：http://jsfiddle.net/146t817h/1/

來源

2017-07-11 14:57:39

在中心svg上堆疊圖像

回答

相關問題