mysterious mysterious - 1 month ago 5
CSS Question

Prevent image in flex container from stretching in Edge

I have an image in flex that stretches in Edge browser but is normal in other browsers. Here is my code and jsfiddle. Open jsfiddle url in chrome and edge.. I want it to look like chrome in edge.



.logo {
height: 100px;
display: -webkit-flex;
display: flex;
-webkit-align-self: center;
align-self: center;
width: 200px;
background: red;
}
.logo img {
width: auto;
height: auto;
margin: auto;
max-width: 100%;
}

<div class="logo">
<img src="http://placehold.it/100x70">
</div>
<img src="http://placehold.it/100x70">





JSFIDDLE


Answer

Instead of align-self: center use align-items: center.

.logo {
    height: 100px;
    display: flex;
    /* align-self: center; */
    align-items: center; /* new */
    width: 200px;
    background: red;
}

The align-self property applies to flex items. Except your div.logo element is not a flex item because its parent – body, in this case – does not have display: flex or display: inline-flex applied. Therefore, body is not a flex container, the div is not a flex item, and align-self is having no effect.

The align-items property is similar to align-self, except it applies to flex containers.

As you can see, without align-items: center, the default behavior varies among browsers.

Comments