0

やりたいこと
作っているアプリ内で,background-sizeがいまいちいい感じに決まりません.そこで,”pcならcontain, それ以外ならcover”みたいなことをやりたいです.

コード例
pages.scss

  .top-main {
  padding: 200px 0 200px;
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  min-height: 100%;
  /*background-image: image-url('app/assets/images/canva.jpg'); */
  background-image: url('zero-home.jpg');
  background-size: contain;
  background-repeat: no-repeat;

こんな感じで今は書いているのですが,この ”background-size: contain; background-repeat: no-repeat;” をどうにかしてサイズに応じてcoverに変えたり出来たらいいなと思っています.

追記分
pages.scss (トップページのscssです)

@media (max-width: 575.98px) {
  .top-main {
    background-image: url('zero-home.jpg');
    background-size: cover;
  }
  .devise {
    background-image: url('zero-home.jpg');
    background-size: cover;
  }
}

@media (min-width: 560px) {
  .top-main {
    background-image: url('zero-home.jpg');
    background-size: contain;
  }
  .devise {
    background-image: url('zero-home.jpg');
    background-size: contain;
  }
}

1 件の回答 1

2

メディアクエリを使ってブラウザーのビューポートの幅で切り替えるのが一般的です。

たとえばスマートフォン用の指定は下記を追加します

@media (max-width: 575.98px) {
  .top-main {
    background-size: cover;
  }
}
6
  • 例えば、「タブレット用(タブレット以上の画面サイズ用)」と「それ以下用」となった二通りで場合分けしたい場合、@media (max-width: 575.98px) { .top-main { background-size: cover; } } @media (min-width: 768px) { .top-main { background-size: contain; } }と2つ書くということでよろしいですか? 2022年7月5日 23:24
  • if-elseみたいな分岐は出来ないのかなと思ったので聞いてみました 2022年7月5日 23:36
  • 1
    複雑な条件文も書けるけど使いません。 else はありませんが not があります。 developer.mozilla.org/ja/docs/Web/CSS/Media_Queries/… よく使われる常套句はこんな感じです @media (max-width: 575.98px) { ... } @media (max-width: 767.98px) { ... } @media (max-width: 991.98px) { ... } 値の意味はここを参照してみてください getbootstrap.jp/docs/5.0/layout/breakpoints/#max-width
    – gotoken
    2022年7月6日 1:48
  • ちなみに 0.02 を引いているのは Safari のバグを回避するためだったのですが、最近はつけない風潮みたいです tailwindcss.com/docs/responsive-design#overview
    – gotoken
    2022年7月6日 1:53
  • あ、bootstrap の記事は僕も確認しました!列挙する形で書くのが主流なんですね、やってみます!0.02引いてるのはそういうことだったんですね!わかりました! 2022年7月6日 4:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。