メインビジュアルをスライドショーかつフルスクリーン表示させ、さらに幅768px以下で別の画像に切り替えたい

サイトのメインビジュアル部分をコーディングしています。
スライドショーかつフルスクリーン表示させたいです。
また、スライドショー・フルスクリーン表示はそのままで、768px以下からリサイズした別の画像に切り替えて表示させたいです。
（人物写真を使用しており、リサイズ画像なしだとタブレットサイズ以下から人が画面外に追いやられてしまいます…。）

スライドショーはライブラリを使用しています。
（jQueryに関しては自分で書き換えたりしたことがないため、知識はほぼゼロです。）

sanitize.cssを使用しています。

試したこと1

「swiper.js（紹介記事）」というjquery不要のライブラリを使用し、HTML側に<img>タグで画像を配置。<picture>タグを使用して画像を切り替える方法。

しかしフルスクリーンで画像を表示させることができなかった。
<img>に100vh指定してみたが画像が歪んでしまう。

HTML
1<div class="mainvisual">
2    <!-- Slider main container --> 
3    <div class="swiper-container">
4    <!-- Additional required wrapper --> 
5    <div class="swiper-wrapper">
6        <!-- Slides1枚目 -->
7        <div class="swiper-slide">
8            <picture>
9                <source media="(min-width: 769px)" srcset="images/topimg01-pc.jpg">
10                <img src="images/topimg01-sp.jpg" alt="">
11            </picture>
12        </div>
13        <!-- Slides2枚目 -->
14        <div class="swiper-slide">
15            <picture>
16                <source media="(min-width: 769px)" srcset="images/topimg02-pc.jpg">
17                <img src="images/topimg02-sp.jpg" alt="">
18            </picture>
19        </div>
20        <!-- Slides3枚目 -->
21        <div class="swiper-slide">
22            <picture>
23                <source media="(min-width: 769px)" srcset="images/topimg03-pc.jpg">
24                <img src="images/topimg03-sp.jpg" alt="">
25                </picture>
26            </div>
27        <!-- Slides4枚目 -->
28        <div class="swiper-slide">
29            <picture>
30                <source media="(min-width: 769px)" srcset="images/topimg04-pc.jpg">
31                <img src="images/topimg04-sp.jpg" alt="">
32            </picture>
33        </div>
34    </div>
35    </div>
36</div><!-- /.mainvisual -->

CSS
1img {
2	max-width:100%;
3	height:auto;
4}
5.mainvisual{
6    height: 100vh;
7}

JavaScript
1$(function() {
2    var mySwiper = new Swiper ('.swiper-container', {
3        effect: "fade",
4        loop: true,
5        autoplay: {
6            delay: 3000,
7            disableOnInteraction: false
8        },
9        speed: 1500,
10        simulateTouch: false,
11    })
12});

試したこと2

「backstretch.js(紹介記事)」というjQueryライブラリを使用し、jQueryに画像パスを記述。
CSSにてvh単位を使用しフルスクリーン表示。

だが、タブレットサイズ以下からの画像の切り替えをどうやるのかわからない。（if文とかいうのをどうにかこうにか記述すればいける…？）

HTML
1<div class="mainvisual"></div>

CSS
1.mainvisual{
2    height: 100vh;
3}

JavaScript
1$(window).load(function(){
2    $(".mainvisual").backstretch([
3        "images/topimg01-pc.jpg", "images/topimg02-pc.jpg", "images/topimg03-pc.jpg", "images/topimg04-pc.jpg"
4    ], {duration: 2500, fade: 2000});
5});

不足している情報があれば追記します。また、上記2つ以外にも方法があればご教授ください。
回答、よろしくお願いします。

yoshinavi

2018/12/06 11:58 編集

「swiper.js」は、レスポンシブ対応していませんか？また、フルスクリーンにする事自体が、画像の上下・左右のどちらかは切れると思います。

退会済みユーザー

2018/12/06 14:10

swiper.jsはおっしゃる通りレスポンシブ対応しているのですが、フルスクリーンにするのにCSSで追記しなければいけないようです。縦横それぞれ10％切れる程度なら見た目に影響ありません。

yoshinavi

2018/12/06 18:59

アスペクト比（縦横比）を変えずに、一般的な横向き写真をスマホの縦向きで、フルスクリーン表示させるには、横部分は10％以上カットされます。そのあたりの理解はされていますか？

退会済みユーザー

2018/12/07 04:42

理解しています。PC用に表示する画像の縦横それぞれが10％以上カットされると見た目に影響が出てしまうので、タブレットサイズ（768px）以下からはタブレット用にレイアウトし直した画像が表示されるように切り替えたいのです…。

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

回答2件

そもそもわけちゃうっていうのも手では？
(個人的に好きなboxsliderを例につかっています)

HTML
1<head>
2  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
3  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
4  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
5
6  <script>
7    $(document).ready(function(){
8      $('.slider').bxSlider();
9    });
10  </script>
11</head>
12<body>
13<ul class="slider pc">
14<!-- パソコン用の記述 -->
15  <li><img src="img/img01.jpg" title="キャプション1"></li>
16  <li><img src="img/img02.jpg" title="キャプション2"></li>
17  <li><img src="img/img03.jpg" title="キャプション3"></li>
18  <li><img src="img/img04.jpg" title="キャプション4"></li>
19</ul>
20<ul class="slider sp">
21<!-- タブレット等用の記述 -->
22  <li><img src="img/img01.jpg" title="キャプション1"></li>
23  <li><img src="img/img02.jpg" title="キャプション2"></li>
24  <li><img src="img/img03.jpg" title="キャプション3"></li>
25  <li><img src="img/img04.jpg" title="キャプション4"></li>
26</ul>
27</body>

CSS
1img {
2width: 100%;
3}
4@media only screen and (min-width: 769px) {
5.pc { display: block !important; }
6.sp { display: none !important; }
7}
8@media only screen and (max-width: 768px) {
9.pc { display: none !important; }
10.sp { display: block !important; }
11}

###追記

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<title>ページタイトル</title>
6  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
7  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
9
10  <script>
11    $(document).ready(function(){
12      $('.slider').bxSlider();
13    });
14  </script>
15<style>
16html {
17height: 100%;
18}
19body {
20height: 100%;
21}
22img {
23width: auto;
24height: 100vh; 
25object-fit: cover;
26}
27/* パソコンで見たときは"pc"のclassがついた画像が表示される */
28@media only screen and (min-width: 801px) {
29.pc { display: block !important; }
30.sp { display: none !important; }
31}
32/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
33@media only screen and (max-width: 800px) {
34.pc { display: none !important; }
35.sp { display: block !important; }
36}
37</style>
38</head>
39<body>
40<div class="pc">
41 <ul class="slider">
42<!-- パソコン用の記述 -->
43  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=パソコン用" title="パソコン用画像"></li>
44  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=パソコン用" title="パソコン用画像"></li>
45  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=パソコン用" title="パソコン用画像"></li>
46  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=パソコン用" title="パソコン用画像"></li>
47</ul>
48</div>
49<div class="sp">
50<ul class="slider">
51<!-- タブレット等用の記述 -->
52  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=スマホ・タブレット用" title="スマホ・タブレット用画像"></li>
53  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=スマホ・タブレット用" title="スマホ・タブレット用画像"></li>
54  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=スマホ・タブレット用" title="スマホ・タブレット用画像"></li>
55  <li><img src="http://placehold.jp/100/cccccc/ffffff/2500x500.png?text=スマホ・タブレット用" title="スマホ・タブレット用画像"></li>
56</ul>
57</div>
58
59 
60</body>
61</html>

念のためサンプルを

投稿2018/12/06 07:20

編集2018/12/06 13:39

退会済みユーザー

総合スコア0

退会済みユーザー

2018/12/06 07:43 編集

回答ありがとうございます。「試したこと１」とやってることが近い…というかほぼ一緒だと思うのですが、この方法で画像の縦横比を崩さずフルスクリーン表示させる方法はご存知でしょうか…。（「ウィンドウいっぱい」という言葉が不適当でした。誤解させてしまい申し訳ありません。）

退会済みユーザー

2018/12/06 07:47

縦いっぱいですか？横いっぱいですか？横いっぱいでしたらこのコードです。http://yoshi0819.s1007.xrea.com/sample/00001/

退会済みユーザー

2018/12/06 07:49

縦も横もです。ブラウザいっぱいに、縦横比崩さず表示させたいです。

退会済みユーザー

2018/12/06 07:51

全ての端末の縦横比が統一とは限らないので縦を揃えて横を切るという形でいいでしょうか？

退会済みユーザー

2018/12/06 07:56

はい！横を切っても構いません。

退会済みユーザー

2018/12/07 09:00

念のため上変えておきました

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

ベストアンサー

「試したこと2」の方法で、JavaScriptにif文を記述することで解決しました。

HTML
1<div class="mainvisual"></div>

CSS
1.mainvisual{
2    height: 100vh;
3}

JavaScript
1$(window).load(function(){
2    if($(window).width() > 769){
3        // 769px以上のデバイスは以下の画像を表示
4        $(".mainvisual").backstretch([
5            "images/topimg01.jpg","images/topimg02.jpg","images/topimg03.jpg", "images/topimg04.jpg"
6        ], {duration: 2500, fade: 2000});
7        // 768px以下のデバイスでは以下の画像を表示
8    } else{
9        $(".mainvisual").backstretch([
10            "images/topimg01-sp.jpg", "images/topimg02-sp.jpg", "images/topimg03-sp.jpg", "images/topimg04-sp.jpg"
11        ], {duration: 2500, fade: 2000});
12    }
13});