flex框中svg图像的行为
flex框中svg图像的行为
提问于 2020-07-03 15:02:06
我目前正在学习css flexbox，我有几个关于在flex box中使用svg图像的问题。如果是svg img is inside in the body of a html document，svg图像的宽度与body.When的宽度相同，我将display:flex放在主体标记svg image in centered vertically and the size is reduced中，它的行为与jpg image which would expand it whole height to match the body's height不同。这是让我感到困惑的第一点。
第二点是当我把the svg inside a div, the svg will disappear.。我读过一篇stackoverflow post about this issue，上面写道这是因为svg没有设置内部的宽/高。但是为什么在没有div的情况下svg图像没有消失呢？这是相同的图像，意味着内部的宽度/高度也没有设置。And If I put one more svg inside the div, the svg images magically appears with a tiny width and height.凹陷图像也是垂直对齐的，而不是水平对齐。为什么当一个以上的svg被放入div中时，它们会重新出现？
我为我糟糕的英语感到抱歉，因为英语不是我的母语。
回答 1
Stack Overflow用户
发布于 2020-07-03 15:27:16
对于你的第一品脱，你需要添加：
align-items:flex-start; // add it to the body.对于这一点，您需要添加div的宽度：
width:100%;
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display:flex;
background: #060AB2;
border: 3px solid yellow;
}
div{
border:3px solid black;
background:green;
width:100%;
}
</style>
</head>
<body>
<div>
<img class="back-face" src="https://marina-ferreira.github.io/memory-game/img/js-badge.svg" alt="JS Badge" />
<img class="back-face" src="https://marina-ferreira.github.io/memory-game/img/js-badge.svg" alt="JS Badge" />
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62710112
复制相关文章
相似问题
腾讯云开发者
