回答編集履歴
1
コード追記
answer
CHANGED
|
@@ -7,4 +7,14 @@
|
|
|
7
7
|
|
|
8
8
|
背景画像でそれをするなら、padding-top で高さを指定します。下記を参考にしてください。
|
|
9
9
|
|
|
10
|
-
[CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld](https://www.nxworld.net/tips/css-background-aspect-ratio.html)
|
|
10
|
+
[CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 | NxWorld](https://www.nxworld.net/tips/css-background-aspect-ratio.html)
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
.area{
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 0;
|
|
17
|
+
padding-top: calc(630 / 1200 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
|
|
18
|
+
background: url(../img/3.jpg) center center / cover no-repeat;
|
|
19
|
+
}
|
|
20
|
+
```
|