質問: なかなか解決できず困っているため、質問させていただきます。 どうぞよろしくお願いいたします。 下記のようなHTML/CSSがあって、 子要素が親要素の中に収まるようにしたいのですが、 なかなかうまくいかず困っております。 子要素に入る画像は横長だったり縦長だったりと アスペクト比はバラバラです。 画像が横長の時は親要素の横幅を超えないように、 縦長の時は親要素の高さに合わせて、 画像の横幅が縮まるようにしたいです。 (画像のアスペクト比は維持) ``` .parent { width: 100%; hight: 320px; padding: 20px; } ``` .childに「height:100%;」を指定しても 画像が縦長の場合、親要素をはみ出してしまいます。 .childに「height: -webkit-fill-available;」を追加すれば、 Chromeでは期待した動きになるのですが、 FirefoxやIEに対応できません。 画像が親要素内に収まるようにしたいのですが、 何か解決法がありましたら、 ご教示いただけると幸いです。 よろしくお願いいたします。
回答: `object-fit`で対応するとかどうでしょう。(IEに対応させないといけない場合は対応用ライブラリを使用しましょう) 【object-fit - CSS: カスケーディングスタイルシート | MDN】 【1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】 【【CSS】画像のトリミングができる「object-fit」|プラカンブログ | WEB制作会社プラスデザインカンパニー】