img в переполнении flexbox сверху и снизу

Question

У меня проблема с flexbox. Изображение внутри должно вставляться во внешнюю коробку без переполнения. Первый и последний работает отлично, но второй переполняется сверху и снизу.

Как я могу это исправить?

.outer { 
 
    border: 1px solid red; 
 
    margin: 25px; 
 
    width: 160px; 
 
    height: 160px; 
 
\t 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.outer img { 
 
    max-width: 100%; 
 
}

<div class="outer"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" /> 
 
</div> 
 

 
<div class="outer"> 
 
    <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" /> 
 
</div> 
 

 
<div class="outer"> 
 
    <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" /> 
 
</div>

Answer 1

Это происходит потому, что высота второго изображения больше, чем ширина. Ширина первого и третьего изображений больше или равна высоте, поэтому они ограничены max-width: 100%;, что гарантирует, что они никогда не превысят ширину родительского контейнера.

Чтобы исправить внести следующие изменения в CSS:

• Добавить max-height: 100%; в .outer img - Это позволит обеспечить высоту изображения не может превышать высоту контейнера

.outer { 
 
    border: 1px solid red; 
 
    margin: 25px; 
 
    width: 160px; 
 
    height: 160px; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.outer img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
}

<div class="outer"> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" /> 
 
</div> 
 

 
<div class="outer"> 
 
    <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" /> 
 
</div> 
 

 
<div class="outer"> 
 
    <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" /> 
 
</div>

Answer 2

Вы должны вставить свое изображение в CSS, это легче иметь такое поведение.

.outer { 
    border: 1px solid red; 
    margin: 25px; 
    width: 160px; 
    height: 160px; 
} 

#pengo { 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png'); 
} 

#blue { 
    background-image: url('http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png'); 
} 

#tumblr { 
    background-image: url('http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg'); 
} 

HTML

<div id="pengo" class="outer"></div> 
<div id="blue" class="outer"></div> 
<div id="tumblr" class="outer"></div> 

Затем играть с background-position и background-size (см MDN), чтобы сделать место изображения, например:

background-position: center; 
background-size: cover; /* or contain*/