画像(img)にbox-sizing:border-boxでサイズ100%+ボーダーでもコンテンツからはみ出さない
box-sizing:border-boxについて
通常、cssでボックスの幅を書くと実際の幅は width + padding + border-width となります。
width : 250px; padding 10px; border-width : 10px;
だと
実際の幅は
box-sizing:border-box を書くと width に書いた値が padding,border-width を含んだものになります。
実際の幅は
使うシチュエーションは色々あるかと思いますが、おすすめするのは画像(imgタグ)に書いておくというもの
何故かと言うと
- レスポンシブの際に横幅100%にすることが多い
- リンクするしないでボーダーの有無を変える事がある
- ボーダーを付けても幅が変わらないのでマウスオーバー(hover)時のみボーダーを付けることができる
という事です。
では、それぞれ説明していきます。
*実際の例ではわかりやすくコンテンツの幅をグレー、ボーダーの幅を10pxにしています。
使用する画像のオリジナルサイズは300*200です。
レスポンシブの際に画像横幅100%をした場合
レスポンシブの場合、画像幅100%を書いておくことが多いです。
width: auto; max-width : 100%; height: auto;
こう書くことでコンテンツからはみ出すのを防ぎます。
ただこれだとボーダーがついた場合、100% + ボーダー になりますので結局はみ出します。
その際、box-sizing:border-boxを書くことでそれを防ぐことができます。
↓実際の例
img {
width : auto;
max-width : 100%;
height : auto;
border : 10px solid #F00;
box-sizing: border-box;
}
通常
通常にボーダー
box-sizing:border-box
100%指定でもちゃんとコンテンツに収まるようになりました。
リンクするしないでボーダーの有無を変える
リンクが貼られた画像のみボーダーを付けると通常であればリンクのある画像だけサイズがボーダー分大きくなります。
box-sizing : border-boxを書くことで表示サイズを同じに出来きます。
img {
width : auto;
max-width : 100%;
height : auto;
box-sizing : border-box;
}
a img {
border : 10px solid #F00;
}
通常
通常リンクにボーダー
box-sizing : border-boxリンク
マウスオーバー(hover)時のみボーダーを付ける
これはPC向けですが、box-sizing:border-boxを使えばマウスオーバー時のみボーダーを付けるという動作でも表示幅は変わらないためレイアウト崩れを防ぐことができます。
可変のため画像の幅は変わってしまいますが、よくある1pxのボーダーとかだとほぼわからないと思います。
img {
width : auto;
max-width : 100%;
height : auto;
box-sizing : border-box;
}
a:hover img {
border : 10px solid #F00;
}
通常リンクホバーにボーダー
box-sizing:border-boxリンクホバー
ホバー時に高さがすこし変わるよう。きっちり詰めるレイアウトとかはやめといたほうがいいかも。
きっちりレイアウトする場合は高さを固定にすれば対応できます。
ですのでPCで下記のようなレイアウトをするときに使えますね。
img {
width : 150px;
height : 100px;
box-sizing : border-box;
}
a:hover img {
border : 2px solid #F00;
}
要するに
ブログコンテンツ内の画像には box-sizing : border-box を書いておくと良い！
とうことですかね。
特にレスポンシブの場合。
