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

2021年3月12日

CSSの小ネタ集です。

Contents

1 background-size cover;が切れるので高さを補い全画面表示
- 1.1 参考サイト
2 CSSで画像をトリミング
3 background-size:cover;とobject-fit: cover;の違い
4 疑似要素に画像が表示されない(background-size: contain;)
5 ヘッダーに斜めストライプを描くCSS
6 疑似要素でCSSのbackgroundを複数指定する
7 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にするといいでしょう。

参考サイト

参考サイトです。

https://blog.looseknot.jp/css/background-image-size.html

https://www.nxworld.net/css-background-aspect-ratio.html

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

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;
}

object-fitの座標調整はobject-positionを一行追加するだけ

容量などの点から素材の方で最適化しておくべきかもしれませんが、位置を調整したい場合もあるでしょう。後ほどさらにアニメーションをかける際などに便利かもしれません。

object-position: 100% 100%;

background-size:cover;とobject-fit: cover;の違い

background-size:cover;はbackgroundの指定が必要です。

疑似要素に画像が表示されない(background-size: contain;)

疑似要素に画像を表示するコードは以下のとおりです。

.icon::before {
  display: inline-block;
  width: 25px;
  height: 25px;
  content: "";
  background-image: url(../icon/icon.png);
  background-size: contain;
}

表示されない場合は次のような原因が考えられます・

cssがおかれている場所からのパスになっていない(chromeのスタイルから確認できます。)
background-size: contain;がない
画像が大きい場合、幅と高さの指定がないとわかりにくいです。

なお、background-imageとbackgroundはどちらでもOKです。

.icon::before {
  display: inline-block;
  content: url(../icon/icon.png);
  transform: scale(0.1);
}

contentに指定する場合は、scaleで調整するようです。ただ、こちらの方が少し大変です。

ヘッダーに斜めストライプを描くCSS

.header {
  position: relative;
  height: auto;
  padding: 70px 20px 0;
  overflow: hidden;
}

.stripe {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 20px;
  background: repeating-linear-gradient(
    -45deg,
    #c4af8f,
    #c4af8f 15px,
    #dfc39a 15px,
    #dfc39a 30px
  );

疑似要素でCSSのbackgroundを複数指定する

backgroundを複数指定することは可能だが、各々サイズがある場合はまずい。

たとえば、片方グラデーションを指定して、片方にアイコンを指定する場合です。この場合、アイコンのサイズの方が普通小さいです。

その場合はbeforeとafterに分ける形になるけど、、3つ目がないため他に使わないのか検討が必要です。

.icon::before {
  background: linear-gradient(to bottom, #ca525c, #ffa17f);
}

.icon::after {
  background: url("../icon/icon.svg") no-repeat center;
}