缩放离子图标SVG至div尺寸

Question

如何将这个完美的圆形svg缩放到div的宽度并保持在中心-不再重复。它被放置为背景图像：

g(const int&)

}     

这就是我现在要得到的？

如何将svg V和H居中？

Answer 1

您可以使用flexbox位置居中，我对此进行了更改：

• 使用Flexbox将.cotainer中的元素居中
• 在width上添加了height和.play_full

.container {
  border : 1px solid red;
  display: inline-flex;
    justify-content: center;
    align-items: center;
}
.play-full {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IgogICAgIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCIKICAgICB2aWV3Qm94PSIwIDAgMzIgMzIiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMDsiPjxnIGlkPSJzdXJmYWNlMSI+PHBhdGggc3R5bGU9IiAiIGQ9Ik0gMTYgNiBDIDEyLjIzNDM3NSA2IDguOTA2MjUgNi4zOTA2MjUgNi44NzUgNi42ODc1IEMgNS4xOTUzMTMgNi45MzM1OTQgMy44Mzk4NDQgOC4xOTkyMTkgMy41MzEyNSA5Ljg3NSBDIDMuMjY5NTMxIDExLjMwMDc4MSAzIDEzLjM4NjcxOSAzIDE2IEMgMyAxOC42MTMyODEgMy4yNjk1MzEgMjAuNjk5MjE5IDMuNTMxMjUgMjIuMTI1IEMgMy44Mzk4NDQgMjMuODAwNzgxIDUuMTk1MzEzIDI1LjA3MDMxMyA2Ljg3NSAyNS4zMTI1IEMgOC45MTQwNjMgMjUuNjA5Mzc1IDEyLjI1MzkwNiAyNiAxNiAyNiBDIDE5Ljc0NjA5NCAyNiAyMy4wODU5MzggMjUuNjA5Mzc1IDI1LjEyNSAyNS4zMTI1IEMgMjYuODA0Njg4IDI1LjA3MDMxMyAyOC4xNjAxNTYgMjMuODAwNzgxIDI4LjQ2ODc1IDIyLjEyNSBDIDI4LjczMDQ2OSAyMC42OTUzMTMgMjkgMTguNjA1NDY5IDI5IDE2IEMgMjkgMTMuMzk0NTMxIDI4LjczNDM3NSAxMS4zMDQ2ODggMjguNDY4NzUgOS44NzUgQyAyOC4xNjAxNTYgOC4xOTkyMTkgMjYuODA0Njg4IDYuOTMzNTk0IDI1LjEyNSA2LjY4NzUgQyAyMy4wOTM3NSA2LjM5MDYyNSAxOS43NjU2MjUgNiAxNiA2IFogTSAxNiA4IEMgMTkuNjMyODEzIDggMjIuODc4OTA2IDguMzcxMDk0IDI0Ljg0Mzc1IDguNjU2MjUgQyAyNS42ODc1IDguNzgxMjUgMjYuMzQ3NjU2IDkuNDE3OTY5IDI2LjUgMTAuMjUgQyAyNi43NDIxODggMTEuNTcwMzEzIDI3IDEzLjUyNzM0NCAyNyAxNiBDIDI3IDE4LjQ2ODc1IDI2Ljc0MjE4OCAyMC40Mjk2ODggMjYuNSAyMS43NSBDIDI2LjM0NzY1NiAyMi41ODIwMzEgMjUuNjkxNDA2IDIzLjIyMjY1NiAyNC44NDM3NSAyMy4zNDM3NSBDIDIyLjg3MTA5NCAyMy42Mjg5MDYgMTkuNjA5Mzc1IDI0IDE2IDI0IEMgMTIuMzkwNjI1IDI0IDkuMTI1IDIzLjYyODkwNiA3LjE1NjI1IDIzLjM0Mzc1IEMgNi4zMTI1IDIzLjIyMjY1NiA1LjY1MjM0NCAyMi41ODIwMzEgNS41IDIxLjc1IEMgNS4yNTc4MTMgMjAuNDI5Njg4IDUgMTguNDc2NTYzIDUgMTYgQyA1IDEzLjUxOTUzMSA1LjI1NzgxMyAxMS41NzAzMTMgNS41IDEwLjI1IEMgNS42NTIzNDQgOS40MTc5NjkgNi4zMDg1OTQgOC43ODEyNSA3LjE1NjI1IDguNjU2MjUgQyA5LjExNzE4OCA4LjM3MTA5NCAxMi4zNjcxODggOCAxNiA4IFogTSAxMyAxMC4yODEyNSBMIDEzIDIxLjcxODc1IEwgMTQuNSAyMC44NzUgTCAyMS41IDE2Ljg3NSBMIDIzIDE2IEwgMjEuNSAxNS4xMjUgTCAxNC41IDExLjEyNSBaIE0gMTUgMTMuNzE4NzUgTCAxOC45Njg3NSAxNiBMIDE1IDE4LjI4MTI1IFogIj48L3BhdGg+PC9nPjwvc3ZnPg==') 50% 50% no-repeat;
  background-size: 100%;
}

<div class="container">
  <div class="play-full"></div>
</div>