画像のセンタリングって地味にめんどくさい

ですね。

下手にCSSで指定するとパディングやら何やらでよくわからなくなるのが初心者

私です。

xn--eck9awc8j.biz

画像イメージをブロックで囲んだ結果、ウィンドウの中で画像がちょろちょろ動く状態になってしまってるので、
画像は縦長、横長に関わらず、元サイズで表示できるように変更したい。
んで、さらにレスポンシブ対応で、ウィンドウ幅に合わせて縮小させる。

とりあえず適当にクラスにmax値を設定してやってみる。

[ .html.erb ]

    <div class="animetitleimage">
      <img src="<%= @anime_title.icon_url %>">
    </div>

[ .scss ]

// showページの画像レイアウト
.animetitleimage {
  max-width: 80%;
  max-height: 80%;
  overflow: scroll;
  margin-left: auto;
  margin-right: auto;

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

できまそん。ぷぅ。

youtube動画をエンベッドしたときに、綺麗にレスポンシブになってたことを思い出したのでパクってみる。

[ .scss ]

.animetitleimage {
  //このへん多分いらなさそう
  //max-width: 80%;
  //max-height: 80%;
  //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%;
}

できましたん。

ブロック要素で囲まずに、直接img要素のサイズ指定をしろと、いうことでとりあえず理解しとこう。
[CSS]ウインドウサイズに合わせて画像を拡大縮小する方法 | プログラミング | アイスケット | 神奈川県相模原市の成功できるホームページ制作・SEO・運用を提供する会社