対応する画像の問題

Question

これらは、制約されている：イメージは、常に元の縦横比を維持しなければなりません。親コンテナの幅が小さすぎる場合は、親コンテナのサイズに合わせて画像のサイズを変更します。画像の最大高さは400ピクセルです。イメージの最大幅は、親コンテナの幅です。問題：親の幅によって制限された場合、画像のアスペクト比は維持されません。ここで私が持っているCSSは次のとおりです。

img.myImage { 
    width:auto; 
    height:auto; 
    max-width:100%; 
    max-height:400px; 
} 

EDIT：が困難に追加するには、これは親コンポーネントです：

div.programContainer { 
    width: 100%; 
    max-width: 1300px; 
    padding: 10px; 
    text-align: left; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: space-around; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

EDIT：ソリューション： 申し訳ありませんが、これは全く関係なかったです親コンテナ内の不要なフレックスボックスを削除して、問題を解決しました。

Answer 1

@EdangJeorlieが言うように、あなたは、ブラウザのサイズが変更されたときに画像のサイズを変更するwidth: 100%を必要があると思います。 JSBinの例はhereです。

ちょうどヘッドアップとして、私はあなたがそれがデフォルトになるようheight: autoを取り除くことができ信じています。お役に立てれば！

Answer 2

あなたはこのようにCSSを使用することができます：私は幅を使用してい

.img-responsive{ 
 
    display: block; 
 
    height: auto; 
 
    max-width: 100%; 
 
}

<img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" alt="Rafique">