質問編集履歴
3
画像を追加しました。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
JQueryのbgSwitcherについて
|
test
CHANGED
|
@@ -175,3 +175,11 @@
|
|
|
175
175
|
}
|
|
176
176
|
|
|
177
177
|
```
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
グレーの部分が余白になってしまいます。
|
|
182
|
+
|
|
183
|
+
元の画像は1980*1080の16:9の画像です。
|
|
184
|
+
|
|
185
|
+
|
2
追記
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
JQueryのbgSwitcherについて
|
|
1
|
+
追記：JQueryのbgSwitcherについて
|
test
CHANGED
|
@@ -137,3 +137,41 @@
|
|
|
137
137
|
|
|
138
138
|
|
|
139
139
|
```
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
追記CSS
|
|
146
|
+
|
|
147
|
+
・以下のように設定する事で、中央に縦幅いっぱいで表示されるようになりましたが、16:9の画像も4:3のように横に余白が出てしまいます。
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
```CSS
|
|
154
|
+
|
|
155
|
+
.bg-slider {
|
|
156
|
+
|
|
157
|
+
width: 100%;
|
|
158
|
+
|
|
159
|
+
height: 100%;
|
|
160
|
+
|
|
161
|
+
background-position:center top;
|
|
162
|
+
|
|
163
|
+
background-repeat:no-repeat;
|
|
164
|
+
|
|
165
|
+
background-size:contain;
|
|
166
|
+
|
|
167
|
+
display:;
|
|
168
|
+
|
|
169
|
+
align-items:;
|
|
170
|
+
|
|
171
|
+
justify-content:;
|
|
172
|
+
|
|
173
|
+
vertical-align:;
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
```
|
1
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
imgにクラスを付ける事も出来ないので、.bg-slider内で対応すべきなのは、分かっているのですが
|
|
8
8
|
|
|
9
9
|
|
|
10
|
+
|
|
11
|
+
16:9ならそのまま拡縮、昔の古い4:3なんかだとテレビで出る左右が黒帯のような感じで出力させたく、質問いたしました。現状だwidth:100%にすると比率の違う画像については、横幅に併せてくれるのですが、縦は見切れてしまいっています。
|
|
10
12
|
|
|
11
13
|
|
|
12
14
|
|