質問編集履歴
8
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
画像のようなイメージで画像の背景に画像より縦が小さい帯をbackground-colorで敷く方法を探しています。
|
|
1
|
+
画像のようなイメージで画像の背景に画像より縦が小さい帯をbackground-colorで敷く方法を探しています。
|
|
2
2
|
|
|
3
3
|
背景に高さの違うbgを敷く記述で良い方法はありますか？](a01ca23d5861040508c681a21c6ecf14.jpeg)
|
|
4
4
|
|
7
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -9,6 +9,8 @@
|
|
|
9
9
|
・画像の横幅を指定したいです。
|
|
10
10
|
|
|
11
11
|
・レスポンシブで画像の縦横比が変わらない、かつ背景の帯も縦横比固定は可能ですか？
|
|
12
|
+
|
|
13
|
+
・<div>のタグにimgの画像を入れたいです
|
|
12
14
|
|
|
13
15
|
|
|
14
16
|
|
6
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,11 @@
|
|
|
4
4
|
|
|
5
5
|
※img＝画像 / bg＝background-colorで指定
|
|
6
6
|
|
|
7
|
-
※サイズ 画像（幅
|
|
7
|
+
※サイズ 画像（幅1000px×縦500px） / box（幅1000px×縦500px） / bg帯（幅100%×幅200px）
|
|
8
|
+
|
|
9
|
+
・画像の横幅を指定したいです。
|
|
10
|
+
|
|
11
|
+
・レスポンシブで画像の縦横比が変わらない、かつ背景の帯も縦横比固定は可能ですか？
|
|
8
12
|
|
|
9
13
|
|
|
10
14
|
|
5
改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -14,37 +14,31 @@
|
|
|
14
14
|
|
|
15
15
|
仮で考えたのは下記です。こちらの記述では表示されませんでした。
|
|
16
16
|
|
|
17
|
-
<div class="
|
|
17
|
+
<div class="test">
|
|
18
18
|
|
|
19
|
-
<img
|
|
19
|
+
<img src="http://placehold.jp/150x150.png">
|
|
20
|
-
|
|
21
|
-
<div class="haikei"></div>
|
|
22
20
|
|
|
23
21
|
</div>
|
|
24
22
|
|
|
25
23
|
|
|
26
24
|
|
|
27
|
-
.
|
|
25
|
+
.test {
|
|
28
26
|
|
|
29
|
-
|
|
27
|
+
margin: 0 auto;
|
|
30
28
|
|
|
31
|
-
|
|
29
|
+
overflow: hidden;
|
|
32
30
|
|
|
33
|
-
|
|
31
|
+
height: 0;
|
|
34
32
|
|
|
35
|
-
padding: 2
|
|
33
|
+
padding-top: 56.25%;
|
|
36
34
|
|
|
37
|
-
bo
|
|
35
|
+
background: no-repeat,
|
|
38
36
|
|
|
39
|
-
|
|
37
|
+
background-size: contain;
|
|
40
38
|
|
|
39
|
+
background-position: center;
|
|
41
40
|
|
|
42
|
-
|
|
43
|
-
.haikei {
|
|
44
|
-
|
|
45
|
-
p
|
|
41
|
+
border: 1px solid;
|
|
46
|
-
|
|
47
|
-
z-index: -1;
|
|
48
42
|
|
|
49
43
|
}
|
|
50
44
|
|
4
改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
画像のようなイメージで
|
|
1
|
+
画像のようなイメージで画像の背景に画像より縦が小さい帯をbackground-colorで敷く方法を探しています。
|
|
2
2
|
|
|
3
|
-
背景に高さの違うbgを敷く
|
|
3
|
+
背景に高さの違うbgを敷く記述で良い方法はありますか？](a01ca23d5861040508c681a21c6ecf14.jpeg)
|
|
4
4
|
|
|
5
5
|
※img＝画像 / bg＝background-colorで指定
|
|
6
6
|
|
|
7
|
-
※サイズ 画像（500px） / box（1000px） / bg帯（幅100%）
|
|
7
|
+
※サイズ 画像（幅500px×縦500px） / box（幅1000px×縦500px） / bg帯（幅100%×200px）
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
3
書式の改善
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
画像の
|
|
1
|
+
画像の背景にbackground-colorで帯を敷く方法
|
test
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
画像のようなイメージで<div>の縦横比を固定に中央に画像
|
|
2
2
|
|
|
3
3
|
背景に高さの違うbgを敷くcssおよびhtmlの記述がわかりません](a01ca23d5861040508c681a21c6ecf14.jpeg)
|
|
4
|
+
|
|
5
|
+
※img＝画像 / bg＝background-colorで指定
|
|
6
|
+
|
|
7
|
+
※サイズ 画像（500px） / box（1000px） / bg帯（幅100%）
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
4
12
|
|
|
5
13
|
|
|
6
14
|
|
2
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -11,8 +11,6 @@
|
|
|
11
11
|
<img class="img" src="#" alt="">
|
|
12
12
|
|
|
13
13
|
<div class="haikei"></div>
|
|
14
|
-
|
|
15
|
-
</div>
|
|
16
14
|
|
|
17
15
|
</div>
|
|
18
16
|
|
1
記載ミス
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
<div class="haikei"></div>
|
|
14
14
|
|
|
15
|
-
</div>
|
|
15
|
+
</div>
|
|
16
16
|
|
|
17
17
|
</div>
|
|
18
18
|
|