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

HTML flex和图像拉伸

image html

0

darkchampionz · 技术社区 · 7 年前

<!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 回复 | 直到 7 年前

1

0

Zowie van Geest 7 年前

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

align-self: center

看到了吗 doc

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号