Q&A
ご回答ありがとうございます。
とても分かり易かったです、ありがとうございます！
imgはインライン要素なのに、display: inline-block;などを指定しないで
height / widthを設定できる意味がよくわかりません。
また画像は、height / widthどちらかを指定すれば、勝手に縮んでくれたりするのですがそれは何故ですか？
MDN見てもちょっとよくわかりませんでした。
わかりやすく教えていただけると幸いです。
回答3件
0
ベストアンサー
img属性
img属性なるものは、HTMLの世界に存在しません。
正しく理解するために正しい用語を覚えて下さい。
img要素
また画像は、height / widthどちらかを指定すれば、勝手に縮んでくれたりするのですがそれは何故ですか？
img要素は置換要素なので、width,heightを指定出来ます。
input要素/textarea要素も同様です。
HTMLとCSSの用語を混在させて理解しようとしているようなので、両者を明確に区別して下さい。
width指定で幅が変化するのはCSSの影響です。
「インライン要素」のようなHTMLの用語は忘れて下さい。
width, height プロパティ
項目 説明 名前 width, height 適用対象 すべての要素 — ただし，置換されない行内【すなわち行内ボックス】は除く。
従って、置換要素は「適用対象」に含まれます。
Re: Hedgehog9 さん
投稿2020/11/16 04:31
編集2020/11/16 10:31
総合スコア18189
0
画像は、height / widthどちらかを指定すれば、勝手に縮んでくれたりするのですがそれは何故ですか？
それは「内在サイズ（intrinsic size）」によるものです。
If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.
Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:
(used width) / (intrinsic ratio)
（勝手訳）
もし 'height' と 'width' の両方の計算値が 'auto' で、かつその要素が内在高さを持っている場合、内在高さは 'height' の使用値になります。
そうではなければ、もし 'height' の計算値が 'auto' で、かつその要素が内在アスペクト比を持っている場合、'height' の使用値は以下の通りです：
（width の使用値）/（内在アスペクト比）
ここでいう「内在アスペクト比」は、画像の実際のアスペクト比と考えて通常は問題ないと思います。
ただ、将来的にはaspect-ratio プロパティの影響を受ける可能性があるのではないかと思います。
投稿2020/11/16 10:02
編集2020/11/16 10:23
総合スコア36960
0
ちょっと意味合いは違いますが
文字列だってフォントサイズを変更すれば縮んだり広がったりしますよね？
inputやtextareaなどもサイズが可変ですがインライン要素です
投稿2020/11/16 04:09
編集2020/11/16 04:12
総合スコア116724
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/16 05:39 編集
2020/11/16 10:04
2020/11/16 10:20