CSS3は、画像を中央に揃えずに伸ばします。

Question

フレックスはイメージをセンタリングするのではなく、なぜ伸ばすのですか？

CSS：

.flex-centre { 
     display: flex; 
     justify-content: center; 
     flex-direction: column; 
     text-align: center; 
     height: 100%; 
     width: 100%; 
} 

HTML：

<div style="height: 400px; width: 400px; background: #ccc"> 
    <div class="flex-centre"> 
     <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
    </div> 
</div> 

結果：

任意のアイデア？あなたは今、あなたが使用したいflex-direction: columnを設定し、今主軸がYとクロス軸であるalign-itemsはクロス軸に沿ったアイテムを配布する（およびalign-itemsのデフォルト値はstretchである）ので、だからX.でいる

jsfiddle

Answer 1

align-items: centerを使用して画像を水平に配置し、画像が伸びないようにします。

.flex-centre { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div style="height: 400px; width: 400px; background: #ccc"> 
 
    <div class="flex-centre"> 
 
    <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
 
    </div> 
 
</div>

別のオプションauto

.flex-centre { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    text-align: center; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
img { 
 
    margin: 0 auto; 
 
}

<div style="height: 400px; width: 400px; background: #ccc"> 
 
    <div class="flex-centre"> 
 
    <img class="img-responsive" src="http://placekitten.com/g/200/200" alt=""> 
 
    </div> 
 
</div>

に画像の左右 marginを設定することです