質問編集履歴
3
画像を追加しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
JQueryのbgSwitcherについて
|
body
CHANGED
|
@@ -86,4 +86,8 @@
|
|
|
86
86
|
justify-content:;
|
|
87
87
|
vertical-align:;
|
|
88
88
|
}
|
|
89
|
-
```
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
グレーの部分が余白になってしまいます。
|
|
92
|
+
元の画像は1980*1080の16:9の画像です。
|
|
93
|
+
|
2
追記
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
JQueryのbgSwitcherについて
|
|
1
|
+
追記：JQueryのbgSwitcherについて
|
body
CHANGED
|
@@ -67,4 +67,23 @@
|
|
|
67
67
|
justify-content: center;
|
|
68
68
|
}
|
|
69
69
|
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
追記CSS
|
|
74
|
+
・以下のように設定する事で、中央に縦幅いっぱいで表示されるようになりましたが、16:9の画像も4:3のように横に余白が出てしまいます。
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
```CSS
|
|
78
|
+
.bg-slider {
|
|
79
|
+
width: 100%;
|
|
80
|
+
height: 100%;
|
|
81
|
+
background-position:center top;
|
|
82
|
+
background-repeat:no-repeat;
|
|
83
|
+
background-size:contain;
|
|
84
|
+
display:;
|
|
85
|
+
align-items:;
|
|
86
|
+
justify-content:;
|
|
87
|
+
vertical-align:;
|
|
88
|
+
}
|
|
70
89
|
```
|
1
追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
現状の.bg-sliderの値のwidthとheightを100%にすると、画像が何も表示されない状況になってしまいます。現在のディスプレイより小さい場合は拡大して、大きい場合は縮小して表示させたいです。
|
|
4
4
|
imgにクラスを付ける事も出来ないので、.bg-slider内で対応すべきなのは、分かっているのですが
|
|
5
5
|
|
|
6
|
+
16:9ならそのまま拡縮、昔の古い4:3なんかだとテレビで出る左右が黒帯のような感じで出力させたく、質問いたしました。現状だwidth:100%にすると比率の違う画像については、横幅に併せてくれるのですが、縦は見切れてしまいっています。
|
|
6
7
|
|
|
7
8
|
|
|
8
9
|
```HTML
|