【CSSで高さの調整】background-size cover;が切れる、object-fit: のトリミング

CSSの小ネタです。

background-size cover;が切れるので高さを補い全画面表示

background-size: 100% 100%ではありません。 containはタイル状に並べてしまうので、あまり使いどころがないでしょう。

.img {
  height: 0;
  padding-top: 48%;
  background: linear-gradient(25deg, rgba(255, 0, 0, 0.4), rgba(0, 255, 0, 0.4)),
    url('imges.jpg');
  background-size: cover;
}

padding-topで適当に見ながら調整すればOKです。heightは0にするといいでしょう。

参考サイト

参考サイトです。

背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法

背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。CSS.sample { -moz-b

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 – NxWorld

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法です。

計算方法も書かれていますが、見ながら調整した方が早いかもです。

CSSで画像の比率を維持したまま高さのトリミング

.img {
  width: 100%
  max-height: 350px;
  object-fit: cover;
}

object-fit: coverは縦横比維持したまま中央を表示するようです。考え方はPhotoshopのリサイズと一緒ですかね。

max-heightではなく、heightと紹介したサイトが多かったのですが、レスポンシブデザインのスマホサイトが高さが広すぎるため、こうしました。

CSSの学習サイト

基本Udemyがおすすめです。

TechWatch