ブラウザウィンドウのサイズ変更のためにCSSで画像を動的に調整する方法

Question

画像をページの「固定高さ」にします。つまり500ピクセルです。ブラウザウィンドウのサイズを変更すると、画像が自動的に調整されます（私はズームインとズームアウトで推測します）ので、比例してぼやけません。

私はこれを持っている：

.homepageheaderbox 
 
{ 
 
height: 470px; 
 
width: 100%; 
 
margin-top:0%; 
 
padding-left: 0; 
 
width: 100%; 
 
margin-bottom: 0; 
 
margin-right: 0; 
 
} 
 
.homepageheaderbox img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto\9; /* ie8 */ 
 
}

<div class="homepageheaderbox"><img style="margin-top:0%; 
 
padding-left: 0; 
 
max-width: 100%; 
 
height: auto; 
 
margin-bottom: 0; 
 
margin-right: 0;" 
 
src="../Images/Homepage/RyanTeachesHome1.jpg"></div>

が、私はここにいくつかの不要なコードがあると知って、私はまだそれで遊んでいます。

現在、ブラウザのサイズが変更されると画像が動的にサイズ変更されますが、ページ上の画像の高さも変更されます。私が得ようとしていることをより明確に見るには、http://ryanteaches.com/（< - 私の目標）を訪問し、それにhttp://ryanteaches.com/newindex.htmlを並べて置き直してください。違いを視覚的に見ることができます。

乾杯！

Answer 1

これはコメントではありません（まだ50人ではありません）。 Tutorialレスポンシブな画像に関するW3Schoolのチュートリアルをお勧めします。 CSSのTutorialで@mediaというクエリを使用する方法もあります。これがあなたを助けることを願っています！