CSSでheight:100%指定したimg、Safariで見ると画像がボックスをはみ出ていた意外な原因 - Qiita

テクノロジーカテゴリーの変更を依頼記事元:

qiita.com/kazhashimoto

4 usersがブックマークコメント

コメント

0

記事へのコメント0件

注目コメント
新着コメント

新着コメントはまだありません。
このエントリーにコメントしてみましょう。

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

規約違反を報告

アプリのスクリーンショット

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

関連記事

CSSでheight:100%指定したimg、Safariで見ると画像がボックスをはみ出ていた意外な原因 - Qiita

CSSでheight:100%指定したimg、Safariで見ると画像がボックスをはみ出ていた意外な原因HTML CSS テキスト... CSSでheight:100%指定したimg、Safariで見ると画像がボックスをはみ出ていた意外な原因HTML CSS テキストを画像化してimg要素としてdivに配置し、iPhoneやデスクトップ版のSafariで表示したら、なんだか画像のサイズがおかしい。CSSに指定したheightの寸法よりも大きく見える。インスペクタで要素の高さを確認したところ、問題のimg要素だけheightの計算値がおかしい！こんな現象にハマりました。発生条件が判ったのでメモ。動作環境 macOS 10.14 (Mojave), Safari 13.1 現象要素div.tabに固定のheightと上下にpaddingを持たせ、子要素としてimg要素をheight: 100%で埋め込みます（下図）。図で「LOREM IPSUM」はテキストを画像化したものです。デスクトップ版のChromeやFirefoxでは、

ブックマークしたユーザー

Hiro_Matsuno2020/07/31
seapig_dolphin2020/07/31
sadness_ojisan2020/07/31

同じサイトの新着

同じサイトの新着をもっと読む

いま人気の記事

いま人気の記事をもっと読む

いま人気の記事 - テクノロジー

いま人気の記事 - テクノロジーをもっと読む

新着記事 - テクノロジー

新着記事 - テクノロジーをもっと読む

設定を変更しましたx