回答編集履歴
1
解説の追加
answer
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
説明とコードから下記のような仕様と類推しました。
|
|
2
2
|
|
|
3
|
-
画像の横幅は1000px、高さは画像そのものの高さ
|
|
3
|
+
0. 画像の横幅は1000px、高さは画像そのものの高さ
|
|
4
|
-
画像はブラウザの幅に対してセンタリング
|
|
4
|
+
0. 画像はブラウザの幅に対してセンタリング
|
|
5
|
-
画像の左右にブラウザの幅いっぱいに背景色
|
|
5
|
+
0. 画像の左右にブラウザの幅いっぱいに背景色
|
|
6
6
|
|
|
7
7
|
これであってますか。
|
|
8
8
|
もし、そうなら、下記のようなコードでどうでしょう。
|
|
@@ -29,5 +29,14 @@
|
|
|
29
29
|
display: block;
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
|
+
**解説**
|
|
33
|
+
背景色は、上位ブロック（sample）に設定。
|
|
34
|
+
下位ブロック(photo)で横幅を設定、margin: 0 auto; でセンタリング。
|
|
32
35
|
|
|
36
|
+
これだけでは、画像の下に余白で出ます。
|
|
37
|
+
これは、画像(img)がインライン要素のため、ベースラインに配置されるためです。
|
|
38
|
+
display: block; でブロック要素にすることで、余白は出なくなります。
|
|
39
|
+
|
|
40
|
+
HTML の img で、width="100%" とすることで、cssで指定した横幅に合わせます。
|
|
41
|
+
|
|
33
42
|
|