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

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

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

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

CSS

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

Q&A

解決済

2回答

416閲覧

画像の拡大、縮小について

akiiro_

総合スコア19

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/02/05 04:46

前提・実現したいこと

親boxの中に子imgがあるというデザインになっています。

  • 親boxの最大サイズは横980px, 縦551.25px。
  • 親boxの中にどんな画像をいれてもトリミングされる事なく表示されるようにする。

1. 横長で大きい画像は横幅が980pxで縦横比を保つ。
2. 縦長で大きい画像は縦551.25pxで縦横比を保つ。
3. 小さい画像は原寸より拡大しつつ、親の縦or横の最大値で拡大を辞め、縦横比を保つ。

  • 縦横比を維持したまま拡大、縮小。

発生している問題・エラーメッセージ

3. 小さい画像は拡大しつつ、親の縦or横の最大値で拡大を辞め、縦横比を保つ。ができない。 - 縦横比は保っているが拡大されず、オリジナルサイズで表示される。

該当のソースコード

HTML

1<div class="parent-box"> 2 <img class="child-img" src="xxx.jpg"> 3</div>

CSS

1.parent-box { 2 max-width: 980px; 3} 4 5.child-img { 6 display: block; 7 width: auto; 8 height: auto; 9 max-height: 551.25px; 10 margin: 0 auto; 11}

試したこと

CSS

1.parent-box { 2 max-width: 980px; 3 max-height: 551.25px; 4} 5 6.child-img { 7 display: block; 8 width: auto; 9 height: auto; 10 margin: 0 auto; 11}

⬆︎縦長の画像がmax-height: 551.25px;を突き抜け表示された。

CSS

1.parent-box { 2 max-width: 980px; 3} 4 5.child-img { 6 display: block; 7 width: 100%; 8 height: auto; 9 max-height: 551.25px; 10 margin: 0 auto; 11}

⬆︎縦横比が崩れて表示された。

補足情報(FW/ツールのバージョンなど)

以上です。よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

object-fitプロパティを使用することで、質問者さんの実現したいことが行えると思います(動作確認リンク)。

CSS

1.parent-box { 2 max-width: 980px; 3} 4 5.child-img { 6 display: block; 7 width: 100%; 8 max-height: 551.25px; 9 object-fit: contain; 10 margin: 0 auto; 11}

投稿2019/02/05 05:21

s8_chu

総合スコア14731

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

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

akiiro_

2019/02/05 06:46

回答ありがとうございます! 無事解決できました! ベストアンサーにさせていただきます!
guest

0

<img>では実現しづらいですが、background-size:containを使って敷き詰めるのも1つの方法ではないかと思います(MDN)。

投稿2019/02/05 05:12

maisumakun

総合スコア145121

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

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

akiiro_

2019/02/05 06:44

回答ありがとうございます! なるほど!imgタグに拘らないのも大切ですね! 次回試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問