JQueryのbgSwitcherについて

#フレキシブルにモニターに合わせて、画像をさせたい

現状の.bg-sliderの値のwidthとheightを100%にすると、画像が何も表示されない状況になってしまいます。現在のディスプレイより小さい場合は拡大して、大きい場合は縮小して表示させたいです。
imgにクラスを付ける事も出来ないので、.bg-slider内で対応すべきなのは、分かっているのですが

16:9ならそのまま拡縮、昔の古い4:3なんかだとテレビで出る左右が黒帯のような感じで出力させたく、質問いたしました。現状だwidth:100%にすると比率の違う画像については、横幅に併せてくれるのですが、縦は見切れてしまいっています。

HTML
1</head>
2<?php
3try{
4  $pdo = new PDO('mysql:hosthoge;dbname=hoge;charset=utf8', 'hoge','hoge',
5  array(PDO::ATTR_EMULATE_PREPARES => false));
6} catch (PDOException $e) {
7 exit('データベース接続失敗。'.$e->getMessage());
8}
9/*データーベースから最新3件の画像のファイルパスを取得する*/
10$sql ="SELECT * FROM sainageimg order by id desc limit 3";
11$stmt = $pdo -> query($sql);
12$stmt->execute();
13
14/*ランダム表示用 リロード時に変わる*/
15$effect =array("fade","blind","clip","slide","drop","hide");
16shuffle($effect);
17?>
18  jQuery(function($) {
19      $('.bg-slider').bgSwitcher({
20          images: [ <?php foreach ($stmt as $row) {
21           echo "'".$row['filename']."',";}?>], // 切り替える背景画像を指定
22          //images: ['img/bg/image_1.png','img/bg/image_2.png','img/bg/image_3.png'], // 切り替える背景画像を指定
23          interval: 2000, // 背景画像を切り替える間隔を指定 3000=3秒
24          loop: true, // 切り替えを繰り返すか指定 true=繰り返す　false=繰り返さない
25          shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する　false=しない
26          effect: "<?php echo $effect[0] ?>", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
27          duration:2000, // エフェクトの時間を指定します。
28          easing: "swing" // エフェクトのイージングをlinear,swingから指定
29      });
30  });
31  </script>
32</head>
33<body>
34  <div class="bg-slider">
35  </div>
36</body>

CSS
1body {
2  width:100%;
3  height:100%;
4  -webkit-font-smoothing: antialiased;
5  -webkit-overflow-scrolling: touch;
6  -ms-overflow-style: none;    /* IE, Edge 対応 */
7  scrollbar-width: none;       /* Firefox 対応 */
8  padding: 0;
9  margin: 0;
10}
11
12.bg-slider {
13  width: 100vw;
14  height:100vh;
15	background-position: center center;
16	background-size:cover;
17	display:flex;
18	align-items: center;
19	justify-content: center;
20}
21

追記CSS
・以下のように設定する事で、中央に縦幅いっぱいで表示されるようになりましたが、16:9の画像も4:3のように横に余白が出てしまいます。

CSS
1.bg-slider {
2  width: 100%;
3  height: 100%;
4  background-position:center top;
5  background-repeat:no-repeat;
6  background-size:contain;
7  display:;
8  align-items:;
9  justify-content:;
10  vertical-align:;
11}

グレーの部分が余白になってしまいます。
元の画像は1980*1080の16:9の画像です。

m.ts10806

2020/01/22 02:56

追記されたかどうかは編集履歴でわかりますし回答した人、コメントした人には通知がいくはずなので、タイトルに書かなくても良いと思います

m.ts10806

2020/01/22 04:24

PHP直接関係ないのでブラウザに表示されたHTMLだけ提示された方がアドバイスを得やすくなると思います

kingkamehameha

2020/01/22 06:42

分かりました。

行動規範の内容に同意します

回答1件

CSS
1.bg-slider {
2  width: 100%;
3  height: 100%;
4  background-position:center top;
5  background-repeat:no-repeat;
6  /* background-size:contain; */
7  background-size: cover; /* ADD */
8  /*
9  display:;
10  align-items:;
11  justify-content:;
12  vertical-align:;
13  */
14}