写真を縦長に成らずに縦横比を保って縮小表示させたい

いろんな大きさの写真を表示するのですが、
<img height="150" src="12004.jpg">
<img height="150" src="12005.jpg">
<img height="150" src="12006.jpg">
の場合、ほぼ希望したとおりの表示になるのですが、横長の写真の場合、例えば、12005.jpg　が想定した横幅２００に入らないのでこれを
<img height="150" width="200" src="12005.jpg">
に変更してみました。すると、縦長の表示になってしまいました。
もちろん、横幅指定で、
<img width="200" src="12005.jpg">
とすると入りますが、今度は、縦長の写真、例えば、12004.jpg の表示
<img width="200" src="12004.jpg">
が縦に広がってしまい、高さ１５０からはみ出てしまいます。

で質問です
１５０ｘ２００の中に収まるように縦横比を保って縮小表示させる（個別対応ではなく一般的な）方法を教えてください

No.4 ベストアンサー 回答者： yambejp 回答日時： 2019/10/25 12:57

<style>

img{max-height:150px;max-width:200px;}
</style>
<img src="http://placeimg.com/100/500/any">
<img src="http://placeimg.com/500/100/any">

この回答へのお礼

回答ありがとうございます。
まさに、これです！！

No3さんの回答から見出した私の方法より、完璧です。

お礼日時：2019/10/25 13:58

No.3 回答者： fujillin 回答日時： 2019/10/25 11:05

こんにちは

一般的な方法かどうかはわかりませんが…

imgタグでなく、背景画像で良ければ比較的容易にできます。
例えば、div要素の背景画像として
　<div class="test"></div>
に対して、CSSで
　.test { width:200px; height:150px; }
となっているところに、背景画像をプロポーショナルにフィットさせるなら
　.text {
　　background-image:url("～～");
　　background-size:contain;
　　background-repeat:no-repeat;
　}
のような形で実現できると思います。
https://developer.mozilla.org/ja/docs/Web/CSS/ba …


あくまでもimg要素のままでサイズを調整したいという場合は、表示サイズ（200×150）と画像のサイズの縦横の比率をそれぞれ計算して、小さい方の比率で画像を縮小（拡大）することが必要になります。
このような処理を自動的に行う方法は標準では用意されていませんので、javascript等を利用して処理することになるでしょう。

Lightbox系のライブラリで画像を拡大表示する際に、画面のサイズに合わせて（適当な割合で）拡大表示するのにも同様の計算が行われているはずです。

この回答へのお礼

fujillin 様、いつも回答ありがとうございます

＞このような処理を自動的に行う方法は標準では用意されていませんので、javascript等を利用して処理することになるでしょう。
スッキリしました！
標準で用意されていないことがわかれば、プログラミングするだけですね。

＞imgタグでなく、背景画像で良ければ比較的容易にできます。
参考になります。
で早速
<style type="text/css">
.img150 {
height: 150px;
width: 200px;
object-fit: contain;
}
</style>

<img class="img150" src="12004.jpg">
<img class="img150" src="12005.jpg">
<img class="img150" src="12006.jpg

で試したところ、希望した表示になりました!

お礼日時：2019/10/25 11:47

No.2 回答者： アホのusa3usa 回答日時： 2019/10/25 10:01

＞個別対応ではなく一般的な方法を教えてください

＞よろしく

ブロックしたら、答えられんやろが、このバーカ

全体で一律のタグで揃えられないから、各ファイルごとにタグでサイズの指定をするんじゃ

ファイルの縦横サイズが色々なら、それに合わせてタグを変える
それが邪魔くさいのなら、縦横比が変わってもいいってことだから、タグのトップに画像の縦横のタグ指定をします。

それが一般的だよ

この回答へのお礼

応答ありがとうございます
＞全体で一律のタグで揃えられないから、各ファイルごとにタグでサイズの指定をするんじゃ
参考にさせていただきます

お礼日時：2019/10/25 10:26

No.1 回答者： スリープ 回答日時： 2019/10/25 08:26

＞１５０ｘ２００の中に収まるように縦横比を保って縮小表示させる（個別対応ではなく一般的な）方法を教えてください

画像のファイル毎にサイズを指定してください

この回答へのお礼

応答ありがとう
>画像のファイル毎にサイズを指定してください
個別対応ではなく一般的な方法を教えてください
よろしく

お礼日時：2019/10/25 09:47