ホームページ > 記事 > ウェブフロントエンド > HTML の img タグの src 属性によって導入された画像 (背景以外) をさまざまな解像度に適合させるにはどうすればよいですか_html/css_WEB-ITnose
HTML の img タグの src 属性によって導入された画像 (背景以外) をさまざまな解像度に適合させるにはどうすればよいですか_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:22:061313ブラウズ
HTML 画像
フォーラムと Baidu を 1 日閲覧しました...私が見たのは背景画像に関する操作だけでしたimg タグで紹介された画像を作成するにはどうすればよいですか。 src in 異なる解像度で表示される画像のサイズは、比率を変更せずに変更できます
ディスカッション (解決策) への返信
現在のコンピューターの解像度を取得することを検討できます。次にimgの幅と高さを設定します。
現在のコンピューターの解像度を取得することを検討してください。次にimgの幅と高さを設定します。
img の幅と高さを特定のピクセル値またはパーセンテージに設定する必要がありますか?
ピクセルを設定するのが最善です。高さの % は有効にならないためです。現在のユーザーが使用している解像度に応じて比例的に拡大または縮小できます。つまり、この画像の幅と高さを設定するには、このソース内の画像の最大値が (デフォルトのサイズを超えることはできません)。画像);
ピクセルを設定することをお勧めします。高さの % は有効にならないためです。現在のユーザーが使用している解像度に応じて比例的に拡大または縮小できます。つまり、この画像の幅と高さを設定するには、このソース内の画像の最大値が (デフォルトのサイズを超えることはできません)。画像);
会社の QQ アカウントでログインできません。このように、さまざまな解像度に基づいてさまざまな状況を判断し、その効果に基づいて画像のサイズを調整する必要があります。ページ?
幅を 100% に設定するだけで、比例して拡大縮小されます
<style type="text/css"> #bodybg { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 0; } #bodybg .stretch { width:100%; height:100%; } </style> <body> <!-- 图片自适屏幕分辨率 --> <div id="bodybg"> <img src=XXXXXX.jpg class="stretch" /> </div> </body> 5 階の書き込み方法は解像度を適応的にブロックでき、高さは過度の高さに適応できます。オリジナル投稿者のリクエストにフロアが応えます！しかし、小さな欠点があります。画像の解像度が十分に高くないと、歪んでしまいます。
要件が高くない場合。画像サイズを超えて失敗する問題は、6階の書き込み方法で対処できます