darkchampionz darkchampionz - 1 year ago 88
HTML Question

HTML flex and image stretching

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

<div class="div1">
<img src="smiley.gif">
<div class="div2">


I use the above code to create an outer
flex display
and in it to be an image and another
with a text right to it. Code works but the
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