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

CSSの小ネタ集です。

特集:Xserver VPS開始!マイクラや開発におすすめで安いVPSサーバー!

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

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の学習サイト

基本Udemyがおすすめです。