max-heightを指定したボックスの中に、縦長の画像を入れると高さを突き破って表示されるのですが、どうしたらmax-heightの高さに画像の縦を自動であわせられるでしょうか…。
.box {
display:block;
max-height:450px;
width:100%;
position:relative;
}
.box img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
overflow:hiddenじゃなくて比率は維持したいです。
どうぞよろしくお願いいたします。
みんなの回答 7 件
max-width: 100%;を外す
.box {
max-height:450px;
display:block;
position:relative;
font-size:450px;
}
.box img {
max-height:1em;
display:block;
}
とか
スマホの写真の縦にも横にも対応したいのが理由なのですが、CSSだけだと難しいのでしょうか…？
縦長の場合と横長の場合それぞれ別のクラスをつければ良いとは思うのですが、毎回つけるのもなぁ…と。
jQueryで判別して振り分けるのが現実的ですか？
背景にしてヤンナイトダメだよ
画像にmax-height入れちゃだめなの？
.box {
display:block;
position:relative;
}
.box img {
width: auto;
height: auto;
max-width: 100%;
max-height: 450px;
}
.box img {
height: 100%;
width: auto;
}
じゃないの？
.box {
}
.box img {
object-fit: contain;
width: 100%;
max-height:450px;
}
これ以上はCSSでムリじゃないかな。これ使うならブラウザ対応気をつけてね。あとはBackstretchみたいなjsでなんとかするしかない。
関連するトピックス