質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3698閲覧

【CSS】子要素の画像が親要素の範囲内に収まるようにしたい

tetutetutetu

総合スコア46

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/04/25 12:33

なかなか解決できず困っているため、質問させていただきます。
どうぞよろしくお願いいたします。

下記のような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に対応できません。

画像が親要素内に収まるようにしたいのですが、
何か解決法がありましたら、
ご教示いただけると幸いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

css

1img { 2 width:100%; 3 hight: 320px; 4 object-fit: contain; 5}

こういう感じではないですか?

投稿2019/04/25 12:42

LanHma

総合スコア192

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetutetutetu

2019/04/26 04:04

ご回答ありがとうございます。object-fitで希望通りの見た目になりました!
guest

0

ベストアンサー

object-fitで対応するとかどうでしょう。(IEに対応させないといけない場合は対応用ライブラリを使用しましょう)

【object-fit - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

【1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

【【CSS】画像のトリミングができる「object-fit」|プラカンブログ | WEB制作会社プラスデザインカンパニー】
https://www.plusdesign.co.jp/blog/?p=9554

投稿2019/04/25 12:41

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetutetutetu

2019/04/26 04:05

ご回答ありがとうございます。object-fitで希望通りにすることができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問