背景画像の見え方を微調整

テストファイルででかい画像を読み込んだら、今まで小さめの画像でテストしていたこともあって、かなり微妙な出来栄え。

ちょっと調整してみる。

showページ

やたらでかい画像がでかいまま表示されてしまうので、一定以上大きくならないように表示させる。CSSで対応。

[.scss]

// showページの画像レイアウト
.animetitleimage {
  max-width: 500px;  //横幅の最大値を指定、それ以上大きくならないようにする
  max-height: 100%;
  overflow: scroll;
  margin-left: auto;
  margin-right: auto;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.animetitleimage img {
  top: 0;
  left: 0;
  max-width: 100%;
  max-height: 100%;
}

indexページ

indexページのサムネも、元画像がやたらでかくて小さいブロックだと何が何だかわからないので、背景画像のサイズを横幅に合わせたサイズに変更する。（※縦幅の方が短い場合は、縦幅に合わせる）
具体的には、

• background-size: cover を入れて表示ブロックにサイズを合わせる
• background-positionの縦方向を 20% に変更
  • キービジュアルでは主人公の顔が中央上部、もしくは真ん中にくる事が多いと思われるので

[ html.erb ]

...
<div style = "background: url(<%= anime_title.icon_url %>) 50% 0% no-repeat; background-size: cover; width: auto; height: 250px;">
  <div class="btn btn-success thumbbutton">
    <%= anime_title.title %>
  </div>
</div>
---

いい感じに！