imgタグ画像要素が親要素をはみ出すとき解決方法を考える
子要素がはみ出したとき、親要素が伸縮してピタッとfitしたいなと思うことがあります。
ということで、内容物のはみ出しを考察します。
とっても初心者用の記事です
目次
ブロック要素とimgタグ
div > div > img の構成です。
画像サイズは、300×100 pxです。
div要素は横いっぱいに伸びる。どこまで伸びるかは親要素次第
画像は、親要素が十分広ければ、伸縮なく表示される。→ 親要素関係なく表示される模様。
まぁ簡単ですね。ブロック要素の幅は親要素いっぱいまで広がると習った気がします。経験的にそうだと思っていました。
親要素の幅を固定する
親要素幅を固定
親の親要素幅を固定
imgタグははみ出ました。はみ出るんですね。
親親divを固定した場合は、親要素は親親要素にfitします。まぁわかりますね。
imgタグの横幅を指定
そのまんまの300px
横幅200pxに指定した
widthだけ指定しました。アスペクト比を維持しながら縮みますね。
高さはautoなのかな？ 高さも固定で指定したほうがDOMの描画は早いかもしれませんね。
親要素にfit-contentを指定する
default
width: fit-content
width: max-content
子要素の幅にfitしましたね。
親親にも、width: max-content; を設定してみます
子要素の幅にfitしましたね。
fit? max? どこが違う？
ffffffff
ffffffff
ffffffff
ffffffff
fit-contentとは、fit-content(stretch)です。
fit-content – w3c
“Essentially fit-content(stretch) i.e. min(max-content, max(min-content, stretch)).”
である。ちょっとよくわかりませんね。stretchってなにかな？
fitは折り返す模様。折り返した後の幅は親要素の幅になるようだ。ここがfitするほうが良いような気がするのだが。
maxは内容部のmax幅です。折り返さない。
fit-contentはmax-contentより小さくなる可能性がある。
子要素が小さい場合、折り返さない場合は、fitとmaxに違いは発生しないと思っている。
今回のテストで画像を表示している分には関係ないだろうと思ってます。
親親要素の幅を固定
親要素はfit-contentとする
はみ出ますね。まぁわかります。
子要素に100%指定
親親要素幅は固定。親要素幅は100%です
はみ出ますね。imgタグも100%指定します。
ご存じ、Border、padding分はみ出ます。内容物が親要素に対して100%を指定するので、paddinやborder分はみ出ます。
box-sizing: border-box; を指定するのがわかりやすいですね。borderまでを含めてくれます。margin は含みませんよ。
親要素とimgにbox-sizing: border-box;を設定します。
imgもborderがあるのでbox-sizing: border-box;を設定しています。
さて、要素のサイズ構成を考えて構築しましょう
親要素をはみ出す画像を使用した。すると、親要素が狭くて伸びないと気付く。pxで幅指定をしていたりする。
親要素が伸長することを期待して、width: max-contentを与える。すると今度は、その親要素をはみ出す。そしてまた、max-contentを与える…
さて、
①max-contentをどこまで与えるか、②それともwidth:100%にするか、 ③それとも親要素の幅を固定して、hiddenでカットするか、④途中でscrollさせるか？
contentは成長するのか、固定なのか、変動を意識する必要があるのか？
コンテンツのサイズの動的な変化の定義。サイトの構成のサイズ設定を考えて構築設計しようと思いました。内側から外側からの考察かな。また、はみ出した場合の制御もですね。
良き発想に着いたと思いました。設計時に枠的な横幅、content幅の定義と制御方針を考察し決めておくことに意義があると結論付けます。
memo
fit-conten()という関数もある。fit-content() – mdn – cssの関数です。min(maximum size, max(minimum size, argument))
画像が親要素より小さいときやアスペクト比が違う場合のimgタグの見え方も確認しておきたいですね。