html - HTML 画像のスケーリング

Question

HTML img タグを使用して大きな画像を表示しようとしています。瞬間、それらは画面の端からはみ出します。ブラウザウィンドウ内にとどまるようにスケーリングするにはどうすればよいですか?

または、これが不可能な場合は、少なくとも「この画像を通常の幅と高さの 50% で表示する」と言うことができますか?

幅と高さの属性は画像をゆがめます。私が知る限り、これはコンテナが最終的に持つ可能性のある属性を参照するためであり、画像とは関係ありません。ピクセルサイズが異なる大量の画像を処理する必要があるため、ピクセルを指定できません。最大幅は機能しません。

score 27 · Accepted Answer

CSSで十分です：

img {
    width : desired_width;
    height: auto; /*to preserve the aspect ratio of the image*/
}

score 8 · Accepted Answer

Javascriptは必要ありません。

IE6 Internet Explorer 6

パーセントは要素の幅に対してのみ機能しますがheight:100%;、正しいコードがないと機能しません。

CSS

html, body { height:100%; }

次に、パーセンテージの使用が適切に機能し、ウィンドウのサイズ変更を動的に更新します。

<img src="image.jpg" style="height:80%;">

width属性は必要ありません。ブラウザのウィンドウサイズが変更されると、幅は比例して拡大します。

そして、この小さな宝石は、画像が拡大された場合、（過度に）ブロック状に見えません（補間します）。

img { -ms-interpolation-mode: bicubic; }

score 7 · Accepted Answer

7

タグmax-width: 100%;への追加は私にとってはうまくいきます。img

于 2015-07-17T15:37:50.817 に答える

score 3 · Accepted Answer

最善の解決策は、スクリプトまたはローカルで画像のサイズを変更して、再度アップロードすることだと思います。視聴者に必要以上に大きなファイルをダウンロードさせていることを忘れないでください

score 1 · Accepted Answer

これを行う方法を私が知っている最良の方法は次のとおりです。

1）オーバーフローをスクロールに設定すると、画像はそのままになりますが、代わりにスクロールして表示できます

2) 小さい画像をアップロードします。現在、アップロード時にたくさんのプログラムがあります (これを行うには、PHP や .net のようなものが必要です)。自動スケーリングを行うことができます。

3) それを使いこなして幅と高さを設定すると、見た目が歪んで見えますが、正しいサイズでもユーザーはフルサイズの画像をダウンロードする必要があります。

幸運を！