【CSS】疑似要素の画像サイズを変更する方法

擬似要素の画像サイズを変更する

beforeやafterはwidth指定をしても変更されません。

.〇〇:before {
  content: url(../img/〇〇.png);
  display: inline-block;
  width: 100px;
  height: 100px;
}

【本日実装したいこと】

擬似要素の画像サイズを変更したい

その実装方法は

背景画像として表示させれば変更可能になります！

サルワカさんのサイトから使わせてもらいました！

【CSS】疑似要素の画像サイズを変更する方法

.〇〇:before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 50px;/*画像の幅*/
  height: 50px;/*画像の高さ*/
  background-image: url(../img/〇〇.png);
  background-size: contain;
  vertical-align: middle;
}

 

背景画像をレスポンシブにする方法

beforeとafterの2つの疑似要素を使います。

:beforebeforeはただスペースを作るだけの役割をしています。

padding-topには、画像の幅に対する高さの比率を指定します

（画像の縦横比が10:5の場合⇒width:50%ならheightは25%に）。

これで「%指定の幅×高さのスペース」が出来上がるわけです。

:after空いたスペースに画像を絶対配置（absolute）します。

widthにはさきほどbeforeで指定した幅と同じ値を入れ、

heightにはこれ以上画像が長くなることは無いだろうという値をpxで指定します。

絶対配置なのでどれだけ高さを大きくしても、

下に続く要素の位置には影響はありません。

background-repeat: no-repeat;とすることで、画像が1度だけ表示されます。

.example {
  position: relative;/*相対配置*/
}

.example:before {/*スペースを作る*/
  content: '';
  top: 0;
  left: 0;
  width: 100%;/*指定したい幅*/
  padding-top: 90%;/*画像の幅に対する高さ比率*/
  display: block;
}

.example:after {/*画像を絶対配置*/
  position: absolute;
  content: '';
  top: 0;
  left:0;
  display: block;
  width: 100%;/*幅*/
  height: 800px;/*どれだけデカくなってもはみ出ないであろう高さを指定*/
  background-image: url(../img/face.png);
  background-size: contain;
  background-repeat: no-repeat;/*画像を繰り返さない*/
  }

以上で実装完了です。

今日もお疲れ様でした。