darkchampionz darkchampionz - 1 year ago 78
HTML Question

HTML flex and image stretching

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


I use the above code to create an outer
div
with
flex display
and in it to be an image and another
div
with a text right to it. Code works but the
image
seems to strech... How can I make the image keep its original size? Ty

Answer Source

Your image is stretching because the default value of align-self is stretch. You need to change it to center or something else.

align-self: center

See it the doc

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download