CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
user3541631
user3541631

Reputation: 4008

CSS issue center and 'max-width' for an image in IE11

I have a basic image thumb, that properly works in Firefox/Chrome but doesn't work in IE11.

The image max-width is not respected and goes at big as it is.

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 0/0 a;
    height: 4.5rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #9E9E9E;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 6px #BDBDBD;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
    text-align: center;
}

.thumb img { 
   display: inline-block;
    max-height: 90%;
    max-width: 90%;
}
<div class="thumb" >
  <img src="https://via.placeholder.com/250x90">
</div>

enter image description here

Upvotes: 1

Views: 897

Answers (2)

kukkuz
kukkuz

Reputation: 42352

To fix the issue in IE11, you can add flex: 1 to the img element - see demo below:

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 0/0 a;
    height: 4.5rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #9E9E9E;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 6px #BDBDBD;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
    text-align: center;
}

.thumb img { 
   display: inline-block;
    max-height: 90%;
    max-width: 90%;
    flex: 1; /* ADDED */
}
<div class="thumb" >
  <img src="https://via.placeholder.com/250x90">
</div>

Upvotes: 2

HamzStramGram
HamzStramGram

Reputation: 437

Try adding: min-width:1px; to your image. It's a known bug of IE.

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font: 0/0 a;
    height: 4.5rem;
    width: 4.5rem;
    padding: 0.25rem;
    border: 1px solid #9E9E9E;
    border-radius: 0.1875rem;
    box-shadow: 0 1px 6px #BDBDBD;
    cursor: pointer;
    margin: 0 0.5rem 0 0;
    text-align: center;

}

.thumb img { 
   display: inline-block;
    max-height: 90%;
    max-width: 90%;
    min-width:1px;
}
<div class="thumb" >
  <img src="https://via.placeholder.com/250x90">
</div>

Upvotes: 3

Related Questions