画像の詳しい設定-�� 〜background-size〜 ページ8
##
{background-size:〜〜;}の〜〜のところは、以下のものが使えます。
設定によっては、画像が縦や横に引き延ばされて歪んでしまうので注意。
よくわかんない、という方はボードへどうぞ。em7といっしょに考えましょう！
言葉で設定する場合、以下のものが使えます。
・auto
(自動で設定、画像が歪むことはない)
何も設定しない場合、このようになります。
・cover
(画像の縦と横の比率は変えずに、画像が出来るだけ大きくなる)
一番扱いやすく便利なものです。
画像の縦と横のどちらか短い方を設定したところの幅に合わせます。
なので、余った部分が出ますが、その部分は上下、左右がカットされます。これを使うときは、background-positionも設定するといいでしょう。
・contain
(画像を出来る限り大きく表示するが、画像の縦と横の比を変えず、画像の切り取りもしない)
coverの次によく使います。
画像の縦と横のどちらか長い方を設定したところの幅に合わせます。
no-repeatを設定する時はbackground-colorも設定しておきましょう。
数値で設定する場合は、px、em、%などで設定できます。
注意！
数値で指定するときは、どちらかをautoという設定にします。
なぜなら、両方とも数値で指定すると、画像が縦や横に引き延ばされたりして歪んでしまうからです。
これも、2つの値で設定することができます。１つ目が幅(横の長さ)、２つ目が高さ(縦の長さ)となっています。１つだけ設定すると、もう１つはautoとなります。
{background-size: 500px} = {background-size: 500px auto;}
この設定だと、横の幅を500px、縦の長さは画像の縦横比を変えないように自動で画像を圧縮します。
em7がよく使う設定を書いておきます。
・縦の長さぴったりに画像をしく
{background-size:auto 100%;}
画像によっては、横が切り取られてしまうので、注意。
・横の長さぴったりに画像をしく
{background-size:100% auto;}
こちらは、縦が切り取られますので、注意。
“cover”と”contain”って何が違うの？
ということに関してですが、
containは画像の全体を見せたい時に使います。どこも切り取られません。
coverは、とりあえず使いたいところの全体に画像を敷きたいときに使います。
困ったらcoverを設定しておきましょう。
##
画像の詳しい設定-�� 〜background-position〜→←画像の詳しい設定-I 〜background-repeat〜
この小説をお気に入り追加 (しおり)
登録すれば後で更新された順に見れます 134人がお気に入り
お気に入り作者に追加
この作品を見ている人にオススメ
この作品を見ている人にオススメ
「CSS」関連の作品
違反報告 - ルール違反の作品はココから報告感想を書こう！(携帯番号など、個人情報等の書き込みを行った場合は法律により処罰の対象になります)
さくさく - 参考にさせていただきます。ありがとうございます！ (12月13日 19時) (
レス) id: 8125d01b3c (このIDを非表示/違反報告)
青い鳥 - 参考にさせてもらいました。関係ないんですけど１００票目に評価しました (10月17日 17時) (レス) @page27 id: 55adadd6b3 (このIDを非表示/違反報告)
ぽんきち丸ドリーム号(プロフ) - 参考にさせていただきました、、！ありがとうございます！！ (7月10日 9時) (レス) @page27 id: 2431247bf4 (このIDを非表示/違反報告)
雨の緑茶。(プロフ) - ゆゆゆ。さん» 失礼します。em7様とは関係のない者ですがご回答させていただきます。もう解決されているかなと思いますが、一応https://uranai.nosv.org/u.php/novel/hetadesum4/の「画像のサイズ変更」ページに載っているかと。 (2023年3月17日 14時) (レス) id: 2f0ba08fc2 (このIDを非表示/違反報告)
おはぎ(砂糖・おはぎサブ垢) - 参考にさせていただきました (2022年11月27日 11時) (レス) @page35 id: dfee7c88d4 (このIDを非表示/違反報告)
作品は全て携帯でも見れます
同じような小説を簡単に作れます → 作成
この小説のブログパーツ
