web-dev-qa-db-ja.com

HTML画像のスケーリング

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

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

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

htmlimage-scaling
94
rwallace

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

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

120
RiddlerDev

imgタグのW3スクールリファレンス で見ると、次のようなことができるはずです。

<img src="img.jpg" width="50%" height="50%"/>

JavaScriptによる自動スケーリングの場合、 このヒントを確認してください

41
Jon W

cssで十分です：

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

Javascriptは必要ありません。

IE6 Internet Explorer 6

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

CSS

html, body { height:100%; }

その後、パーセンテージを使用すると適切に機能し、ウィンドウのサイズ変更時に動的に更新されます。

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

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

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

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

小道具はこのソースに行きます： 究極のIE6チートシート：25+ Internet Explorer 6のバグを修正する方法

6
unidentified-1

max-width: 100%;をimgタグに追加するとうまくいきます。

6
Ralph David Abernathy

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

2
riotera

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

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

2）より小さな画像をアップロードします。アップロード時に多くのプログラムがあります（これを行うにはPHPや.netのようなものが必要になります）自動的にスケールすることができます。

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

がんばろう！

0
Dorjan