HTML imgスケーリング


114

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

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

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


4
そのがあることに留意してくださいいない巨大な画像を送信し、CSSでそれらを小さくすることをお勧めします。帯域幅を節約し、ページの応答性を高めるには、同じ画像の異なるバージョンを使用することをお勧めします(画像が小さく見えても、画像全体が送信されます)。
EstebanKüber2009

1
rwallace、.net、PHP、または純粋なHTML以外のものを使用していますか?
ドルジャン、2009

1
画像ファイルのサイズは問題ではありません。私が帯域幅を節約する必要がある場合は必要ありません。PHPを使用していますが、HTMLソリューションは機能します。
rwallace 2009

回答:


135

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

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


7
大規模な画像でこれを行うと、ダウンロード時間が長くないはずのページのダウンロード時間が長くなることに注意してください。可能であれば、実際に画像のサイズを変更することをお勧めします。
ceejayoz、2009

ありがとう!幅を設定するだけのソリューションは、正しいスケーリングで機能するだけでなく、実際には、幅を100%に設定するだけで最初の部分も実行します。
rwallace 2009

2
@ceejayoz同意するが、それは彼が求めていることではない。
RiddlerDev 2009

@ceejayozどうしてもっと時間がかかるのかな?両方の状況で表示するときにサイズを変更する必要はありませんか?それとも、実際の画像のサイズを手動で変更してファイルを変更するのですか?
Abdul

2
@アブドゥル3,000x3,000ピクセルの5MB画像は、ウェブサイトの100x100ピクセルのスロットでは使用しないでください。
ceejayoz


9

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

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

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

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

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


1
vw私にとっては命の恩人でしたが、他の方法は手元の画像では機能しませんでした。
キャラム

6

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のバグを修正する方法



2

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


0

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

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

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

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

幸運を!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.