フレックスボックス - 奇妙な画像のサイズ変更

Question

これには奇妙な問題が続いています。

フレックスアイテム（画像）を特定のサイズ（w：300px h：300px）に設定したい場合は、私は私のブラウザでプレビューすることを開くと、画像がフレックスアイテムとしてコンテナにまで押しつぶさ表示されます

は、通常、（テキストはスペースのほとんどを占める。）振る舞うだろうとすぐに私は私のブラウザのサイズを変更するよう

imgは指定されたサイズ（w：300px h：300px）にサイズ変更されます。

これは起こりそうなことですか？ Treehouseワークスペースのテキストエディタを使用しているので、それがバグかどうか分からないか、何か間違っていますか？ここで

おかげで、

.con { 
 
    display: flex; 
 
    background: gainsboro; 
 
    font-size: 1.8em; 
 
} 
 
.con img { 
 
    width: 300px; 
 
    height: 300px; 
 
    margin: 0 10px; 
 
}

<div class="surgery con"> 
 
    <img src="../img/cloud.jpg"> 
 
    <p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p> 
 
</div>

はそれが私がプレビューに開いたときにどのように見えるかのスクリーンショットです： http://imgur.com/a/Ejp8R

ここでは、すぐに私が展開するよう次のようになります。ブラウザ： http://imgur.com/a/xT5Yr

Answer 1

min-widthプロパティを使用することをお勧めします。これは、あなたが奇妙なimgのストレッチを避けるのに役立ちます。

JsFiddle：御馳走を働いたhttps://jsfiddle.net/5pbqfyam/

.con { 
 
    display: flex; 
 
    background: gainsboro; 
 
    font-size: 1.8em; 
 
} 
 
.con img { 
 
    min-width: 300px; 
 
    height: 300px; 
 
    margin: 0 10px; 
 
}

<div class="surgery con"> 
 
    <img src="../img/cloud.jpg"> 
 
    <p>Lorem ipsum dolor sit amet, urna sollicitudin pede sollicitudin fusce adipiscing vitae. Commodo egestas. Ut tempus, molestie integer in integer, pellentesque sed egestas duis, commodo sapien pellentesque turpis nulla tempor.</p> 
 
</div>