代码之家 › 专栏 › 技术社区 › darkchampionz

HTML flex和图像拉伸

image html

0

darkchampionz · 技术社区 · 9 年前

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
    background-color: red;
    display: flex;
    padding: 10px;
}
.div2 {
    background-color: yellow;
    margin-bottom: 10px;
}
</style>
</head>
<body>

<div class="div1">
    <img src="smiley.gif">
    <div class="div2">
        A<br>Smiley<br>Face
    </div>
</div>

</body>
</html>

我使用上述代码创建一个外部 div flex display 部门 右边有一个文本。代码可以工作,但 image 似乎在拉伸。。。如何使图像保持其原始大小?泰

1 回复 | 直到 9 年前

1

0

Zowie van Geest 9 年前

您的图像正在拉伸,因为align self的默认值为stretch。你需要把它改成中心或者其他的。

align-self: center

看到了吗 doc