Question

<!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，其中包含一个图像，另一个div带有文本权限。代码有效但image似乎拉伸......我怎样才能使图像保持原始尺寸？ TY

Answer 1

您的图片正在拉伸，因为align-self的默认值是拉伸。您需要将其更改为居中或其他内容。

align-self: center

见doc

HTML flex和图像拉伸

1 个答案: