CSSを使用して画像のスケールを上下に調整する

私のウェブサイトのヘッダーに画像があります。 CSSプロパティを使用してブラウザの幅全体に広げ、ブラウザのウィンドウサイズを調整するユーザに反応させ、それに応じて画像の垂直軸をスケーリングします。これは実際にできることですか？CSSを使用して画像のスケールを上下に調整する

2009-05-04 Anonymous

幅と高さのプロパティをパーセンテージに設定できます（たとえば、幅が100％の場合、画像がページ全体に広がります）。これは、CSSを使用して行うことができます。

2009-05-04 19:00:23

CSSは確かにイメージ（：http://www.davidrhysthomas.co.uk/mindez/borked.htmlあるいは、少なくとも、私はfolowingのURLでFirefoxでそうするためにそれを使用しましたが）：伸ばすことができ

img {height: 100%; 
    width: 100%; 
    min-height: 600px; 
    min-width: 800px; 
    }

例えば。

しかし、私は、JSがおそらくあなたのより良い友達であるというサイズ変更のビューポートに反応すると思います。

2009-05-04 19:01:50

パーセントはイメージ全体の幅を保持し、ブラウザのサイズ変更時にイメージを更新します。

あなたはにイメージをしたい場合は、常にはストレッチ、あなたが使用できること。ただし

img { 
    width:100%; 
}

、簡単に画像の総がらくたのように見えるようにすることができます。より安全な方法は次のとおりです。

img { 
    max-width:100%; 
}

いずれの方法でも、ブラウザのサイズ変更で画像のサイズが変わることがあります。しかし、2番目の画像は自然なサイズを超えて画像を伸ばさないので、変形しないように見えます。

2009-05-04 19:05:58 seanmonstar

正直言って、私は幅の考え方よりも最大幅の方が使いやすいです。 –

ここでは、このCSSスタイルを画像を含む要素に適用しています。この例では、画像は、ページ本文の背景にある：

body 
{ 
margin: 0; 
padding: 0; 
width: 100%; 
background: url(images/YOUR-IMAGE.JPG) no-repeat left top; 
background-size: 100%; 
}

これは、要素間であなたのイメージを最大限にします。ウィンドウのサイズを変更すると、ブラウザに合わせて画像が拡大されます。新しいウィンドウのサイズ

2012-11-15 17:28:20 Toby

答えて