自分用の Web サイトを構築しようとしています.画像をヘッダーとして使用したいです...背景が画面の解像度に合わせて自動的にスケーリングされるようにしました...画像 (ヘッダー) を確認するにはどうすればよいですかまた、画面の解像度に応じて自己スケーリングします...
例: 私の画像は幅 350 ピクセル、高さ 130 ピクセルです。これを画面解像度が 1280X768 のときのサイズにしたいのですが、画面サイズに応じて比例して変更する必要があります。
できればCSSを使用してこれを行う方法を教えてください..私はjsまたはjqueryでも問題ありません
よろしくお願いします
css で幅のみを指定すると、高さは自動的にスケーリングされます。イメージの withをその親に対して相対的に簡単に指定できます。
あなたの例では、width: 27%(1280 / 350) を指定する必要があります。親は 100% 幅でなければならないことに注意してください。
screen.widthと を使用して DOM から画面サイズを取得できますscreen.height。次に、目的の画像をロードまたは置換するための JS を記述したり、画像のheight/width属性を調整したりできます (これにより拡大縮小されますが、常に見栄えがよくなるとは限りません)。
Ethan Marcotte による流体グリッドに関する優れた記事があります ( http://www.alistapart.com/articles/fluidgrids/ )。
これらのプリンシパルは、CSS を使用して画像に適用できます。彼は個人サイトで行っています。あなたを助ける良いアプリもあります。
これは私を読んでいます->ウェブダック http://inteldesigner.com/web-duck/about.php
これにはより多くの機能があります -> em calc http://riddle.pl/emcalc/