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