css 縦横比を维持しながら横幅いっぱいに背景画像を表示

Posted 2021-05-13

.background {
  width: 100%;
  height: 0;
  padding-top: calc(300 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
  background: url(bg.jpg) center center / cover no-repeat;
}