最終更新日: 2021年2月18日
CSSのcontentで画像を指定してサイズ調整する方法！
CSSのcontentで画像を指定してサイズ調整する方法についてサンプルコード付きで解説します。CSSのcontentで画像を指定すると、widthやheightプロパティでサイズを調整することができません。ではどのようにすればサイズ調整できるのかを紹介します。
CSSのcontentプロパティで画像を指定する方法
まずCSSのcontentプロパティで画像を指定する方法について解説します。
適当なHTML要素を作っていただき、それに対して擬似要素をCSSにて記述します。
そして::beforeの擬似要素のcontentプロパティでurl(画像のpath)を記述します。
上記のように画像を表示させることができます。
CSSのcontentプロパティで画像を指定してサイズ調整する方法
CSSのcontentプロパティで画像を指定してサイズ調整する方法について解説します。
contentプロパティで画像を指定するとwidth、heightプロパティが使えません。
ではサイズを変更したい場合どうするかというと、transformプロパティのscale()で拡大・縮小させます。
では1つ目のサンプルコードの画像を1/2の大きさに縮小させてみます。
このように画像の大きさが半分に縮小されました。
また縮小、拡大させる時には必ずdisplayプロパティでblockまたはinline-blockを指定してください。
そうでないと拡大、縮小がされませんのでご注意下さい。
まとめ
いかがでしたでしょうか？
ぜひここで紹介した方法を用いて、CSSのcontentで画像を指定してサイズ調整してみてください。
