なかなか解決できず困っているため、質問させていただきます。
どうぞよろしくお願いいたします。
下記のようなHTML/CSSがあって、
子要素が親要素の中に収まるようにしたいのですが、
なかなかうまくいかず困っております。
子要素に入る画像は横長だったり縦長だったりと
アスペクト比はバラバラです。
画像が横長の時は親要素の横幅を超えないように、
縦長の時は親要素の高さに合わせて、
画像の横幅が縮まるようにしたいです。
(画像のアスペクト比は維持)
<!-- HTML --> <div class="parent"> <div class="child"> <img src="sample.jpg" alt=""> </div> </div> <!-- CSS --> .parent { width: 100%; hight: 320px; padding: 20px; }
.childに「height:100%;」を指定しても
画像が縦長の場合、親要素をはみ出してしまいます。
.childに「height: -webkit-fill-available;」を追加すれば、
Chromeでは期待した動きになるのですが、
FirefoxやIEに対応できません。
画像が親要素内に収まるようにしたいのですが、
何か解決法がありましたら、
ご教示いただけると幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/26 04:04