将离子图标 SVG 缩放到 div 尺寸答案

【问题标题】：Scale ion icon SVG to div dimensions将离子图标 SVG 缩放到 div 尺寸
【发布时间】：2018-06-22 04:04:09
【问题描述】：

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

<style>
.play_full{
background: url('../_svg/_ionicons_svg_md-play-circle.svg');
position:absolute;
background-size: 100% 100%;
background-repeat: no-repeat;

}

这就是我现在得到的？

如何使 svg V 和 H 居中？

【问题讨论】：

标签： css svg

【解决方案1】：

你可以使用 flexbox 位置居中，我改变了这个：

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

.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>

【讨论】：