イメージのサイズを画面の100％にする方法（1024ピクセル未満の場合のみ）

Question

私はウェブサイトに画像を置いてみたいと思います。私は背景イメージではないが、通常のイメージ、後でホバーと"いくつかの領域上にカーソルを置くと何かが画面上で変化する"種類の相互作用が使用できます。

私がしたいのは、この画像を閲覧領域の100％幅にすることですが、画面が1024pxより小さい場合に限ります。画面が大きい場合は、画像を正確に1024ピクセル幅にします。

どうすればよいですか？私が読んだところでは、CSS3はブラウザウィンドウに合わせて自動的に背景幅を設定できますが、バックグラウンドイメージを使うと、後でイメージでインタラクティブなトリックを行うことはできません。しかし、私はインタラクティブなトリックをしたことがないので、多分それは可能です。

私は、マウスポインタがポリゴン領域の上にあると、divまたは画像が変更されたり、どこかに表示されたりすることを意味します。このテクニックについてのどこを読んでいるのか教えていただけますか？それはどのように呼び出されますか？

私はJavaScriptでの経験はありませんが、私はpremade JSプラグインしか使用していませんが、この問題についてはJSを使うべきだと言えばそれでも問題はありません。

Answer 1

使用CSS max-width ​​

HTML：

<img src="flower.jpg" class="no-bigger-than-1024"/> 

CSS：

.no-bigger-than-1024{width:100%; max-width:1024px;} 

は

Answer 2

img 
{ 
    max-width:1024px; 
    width:100%; 
}