HTML imgスケーリング

HTML imgタグでいくつかの大きな画像を表示しようとしています。現時点では、画面の端から消えています。ブラウザウィンドウ内に収まるようにスケーリングするにはどうすればよいですか？

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

幅と高さの属性は画像をゆがめます-私が知る限りでは、これはそれらがコンテナが最終的に使用する可能性のあるすべての属性を参照するためです。これは画像とは無関係です。ピクセルサイズの異なる画像の大規模なコレクションを処理する必要があるため、ピクセルを指定できません。最大幅は機能しません。

widthまたはを設定するだけでheight、もう一方が自動的にスケーリングされます。そして、はい、パーセンテージを使用できます。

最初の部分は実行できますが、JavaScriptが必要であるため、すべてのユーザーに対して機能するとは限りません。

CSSは十分です：

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

私はこの質問が長い間尋ねられてきたことを知っていますが、今日の時点で、1つの簡単な答えは次のとおりです。

<img src="image.png" style="width: 55vw; min-width: 330px;" />

ここでvwを使用すると、幅がビューポートの幅の55％を基準にしていることがわかります。

現在、すべての主要なブラウザーがこれをサポートしています。

このリンクを確認してください。

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; }

小道具はこのソースに行く： Ultimate IE6 Cheatsheet：25+ Internet Explorer 6のバグを修正する方法

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

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

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

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

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

3）それと一緒に生活し、幅と高さを設定します、これはそれが歪んで見えるようになりますが、適切なサイズでもユーザーはフルサイズの画像をダウンロードする必要があります。

幸運を！