HTML の img タグの src 属性によって導入された画像 (背景以外) をさまざまな解像度に適合させるにはどうすればよいですか_html/css

HTML の img タグの src 属性によって導入された画像 (背景以外) をさまざまな解像度に適合させるにはどうすればよいですか_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:22:06

オリジナル

1327 人が閲覧しました

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階の書き込み方法で対処できます