web-dev-qa-db-ja.com

適切なimgタグにサイズ変更する方法は？

小さなウィンドウに画像を表示したいのですが、画像の比率を保存する必要があります（それでも人々にそれが何であるかを知ってもらいたいです）。たとえば、画像が1000X200ピクセルであり、次のように定義されたdivがあるとします：height：100px;幅：100px;だから私は画像がそのように書いて欲しいです：

<img src="asd.jpg" height=20 width=100 />

ではなく

<img src="asd.jpg" height=100 width=100 />

か否か

<img src="asd.jpg"/>

そして巻物があります。

パーセンテージで作業することもできますが、どうすればいいですか..（そして、パーセンテージだけでも動作しますか？）

htmlcssimageresize
16
Nir

CSSでmax-heightおよびmax-widthを設定すると、最新のブラウザーはそのサイズに制限しますが、アスペクト比は正しく保ちます。

<img src="asd.jpg" style="max-height: 100px; max-width: 100px;" />
39
David Fullerton

親のdivにwidthとheightのセットがある場合、imgの最大幅と最大高さを100%に設定できます。

div {
  width: 100px;
  height: 100px;
}
div > img {
  max-width: 100%;
  max-height: 100%;
}

（モバイルブラウザなどでは、画像の最大幅を100％にすることを常にお勧めします。）

5
Rudie

JavaScriptを使用する場合は、画像の高さと幅を取得し、一方を他方で割って比率を取得し、その比率に対してdivの高さと幅を掛けてから、それらの数値にimgディメンションを設定できます。

明らかにそれは非常に単純な言い方ですが、JSでこれを行うのか、厳密にCSSソリューションを使用するのかはわかりません。

1
Munzilla