CSSで背景に画像を敷いて、レスポンシブデザインにする場合
アスペクト比が維持できない。
幅は％指定でできる。
高さはどうするか？
1 | #header { |
2 | width: 100%; |
3 | background: url(./img/main.png); |
4 | border: 1px solid red; |
5 | } |
6 | /* 高さを幅の % に固定 */ |
7 | #header:before { |
8 | content: ""; |
9 | display: block; |
10 | padding-top: 35%; |
11 | } |