フルスクリーンスライダ画像が切り取られて表示される

Question

ウェブサイトに貼ったフルスクリーンスライダ画像が、さまざまなプラットフォーム（モバイル、スモールスクリーンなど）で部分的に切り取られているようです。私はそれを私のホームページにフィットさせて伸ばそうとしており、どんなプラットフォームでも（フルサイズで）同じものを見たいと思っています。ウェブ上での私の検索によると、多くの方法を試しましたが、解決策が見つかりませんでした。ここで

は、コードの一部です：ここで

<section class="bannercontainer"> 
     <div class="fullscreenbanner-container"> 
      <div class="fullscreenbanner"> 

       <ul> 
        <li data-transition="parallaxvertical" data-slotamount="5" data-masterspeed="1000" data-title="Slide 1"> 
         <img src="~/img/index/slider/slider-05.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center" data-bgrepeat="no-repeat" > 

は、関連するCSSの一部である：ここで

.fullscreenbanner-container { 
    width: 100%; 
    position: relative; 
    padding: 0; } 
    .fullscreenbanner-container .tp-bullets.preview4 { 
    opacity: 1 !important; 
    height: auto !important; } 
    @media (min-width: 992px) { 
     .fullscreenbanner-container .tp-bullets.preview4 { 
     bottom: 30px !important; } } 
    .fullscreenbanner-container .tp-bullets.preview4 .bullet { 
    background: rgba(255, 255, 255, 0.5) !important; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    box-shadow: none !important; 
    width: 6px !important; 
    height: 6px !important; 
    border: 2px solid rgba(255, 255, 255, 0) !important; 
    display: inline-block; 
    margin-right: 14px !important; 
    margin-left: 0 !important; 
    margin-bottom: 0px !important; 
    -webkit-transition: background-color 0.2s, border-color 0.2s; 
    -moz-transition: background-color 0.2s, border-color 0.2s; 
    -ms-transition: background-color 0.2s, border-color 0.2s; 
    -o-transition: background-color 0.2s, border-color 0.2s; 
    transition: background-color 0.2s, border-color 0.2s; 
    float: none !important; } 
    .fullscreenbanner-container .tp-bullets.preview4 .bullet:hover, .fullscreenbanner-container .tp-bullets.preview4 .bullet.selected { 
    box-shadow: none !important; 
    background: rgba(255, 255, 255, 0) !important; 
    width: 14px !important; 
    height: 14px !important; 
    border: 2px solid white !important; 
    margin-right: 10px !important; 
    margin-left: -4px !important; 
    margin-bottom: -3px !important; } 
    .fullscreenbanner-container .tparrows.preview4 .tp-arr-iwrapper { 
    display: none !important; } 

は、それが今の携帯にどのように見えるかです： ここでどのようにされました今すぐクロムブラウザをご覧ください： ここに実寸画像があります：

Answer 1

あなたはここで完璧な結果を得ることはできませんが、バックグラウンドサイズのカバー特性を試しましたか？ https://www.w3schools.com/cssref/css3_pr_background-size.asp

div { 
    background-image:url('smiley.gif'); 
    background-repeat:no-repeat; 
    background-size:cover; 
} 

Answer 2

あなたが試すことができます。このために「背景サイズカバー」を。

構文

background-size: auto|length|cover|contain|initial|inherit; 

添付のリンクはあなたの参照のためのサンプルコードがあります。 https://jsfiddle.net/jv92788r/

これが役に立ちます。

Answer 3

最初に私は携帯電話のスライダーを削除します。ほとんどのクライアントは、スライダーの内容が通常は高解像度のように表示されないため、小さいサイズのスライダーを削除するように求めています。第二の解決策は、モバイル上でよりよく適合する異なるスライダ画像を有することである。今、バナーのオファーは、360pxのようなより小さい解像度では見えません。 1920年のようなより大きな解像度の問題は、画像が小さすぎるということです。たとえば、最初の画像は1200x600pxで、他の3枚は1000x500pxです。デフォルトのスライダの高さは745ピクセルです。だからこそ、イメージは良く見えません。画像をスライダコンテナに合わせて大きくし、問題の半分を完了させる必要があります。