【Next.js】Imageコンポーネントでbackground-imageを実現する

素直に「background-image」を使った方がいいかもしれませんが、background-imageだと画像の遅延読み込みや最適化ができないので。

Google PageSpeed Insightsでも怒られるので。

const sample = () => {
  return (
    <div className="wrapper">
      <div className="divSample">
        <Image className=".imgSample" src="/test.jpg" layout='fill' objectFit="cover" />
      </div>
      <p className="textSample">
        サンプル
      </p>
    </div>
  );
}

export default sample;

.wrapper {
  position: relative;
}

.divSample {
  height: 40rem;
  width: 100%;
}

.imgSample {
  border-radius: 50px/50px;
}

.textSample {
  font-size: 5rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

IT技術ブログ
↓↓「にほんブログ村」のランキングに参加しています。少しでも面白い、参考になったとか思われたらポチッとしていただけると嬉しいです！

にほんブログ村