background-size cover;が切れる、object-fit: 角丸画像トリミングなど

CSSの小ネタです。

1 background-size cover;が切れるので高さを補い全画面表示
- 1.1 参考サイト
2 CSSで画像をトリミング
3 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-box

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

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

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

CSSで画像をトリミング

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

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

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

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

CSSで角丸や不定形の形に画像をトリミング

border-radiusで形を作り、object-fit: cover;を使うといけるようです。角丸はborder-radius: 50%にしてください。

.img {
  width: 300px;
  height: 300px;
  border-radius: 40% 60% 27% 73% / 64% 61% 39% 36%;
  object-fit: cover;
}

何か下地の上に配置する場合はabsoluteを使いましょう。opacityを一時的に使うと透明のため調整しやすいです。

.img {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  border-radius: 40% 60% 27% 73% / 64% 61% 39% 36%;
  object-fit: cover;
  opacity: 0.5;
}