如何使圖像填充滑塊

Question

我正在開發一個網絡應用程序，我使用BXSlider在頁面頂部顯示圖像幻燈片。 我遇到的問題是圖像不適合滑塊。 它顯示圖像周圍的白色邊緣。 如何使圖像填充silder？

編輯：

這是我的樣式表：

 .bx-wrapper { position: relative; margin: 0; padding: 0; *zoom: 1; } .bx-wrapper img { max-width: 100%; display: block; width: 100%; } .bx-wrapper .bx-viewport { -moz-box-shadow: 0 0 0 #ccc; -webkit-box-shadow: 0 0 0 #ccc; box-shadow: 0 0 0 #ccc; border: 0; left: -40px; background: #fff; /*fix other elements on the page moving (on Chrome)*/ -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); }

我添加了width: 100%和border: 0選項，但圖像仍然沒有填充滑塊。 它在右端留有一些空間。

Answer 1

更新 2

閱讀評論后，我發現更改 bxslider.css 不是一個選項，您更願意覆蓋有問題的樣式。 我查看了樣式表，發現您發布的樣式與原始樣式不同。 你的是：

.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 0 #ccc;
    -webkit-box-shadow: 0 0 0 #ccc;
    box-shadow: 0 0 0 #ccc;
    border:  0;
    left: -40px;
    background: #fff;
}

原文是：

.bx-wrapper {
   -moz-box-shadow: 0 0 5px #ccc;
   -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    background: #fff;
}

簡而言之，您的目標是.bx-viewport而不是.bx-wrapper 。 所以在代碼段 3 中，它與代碼段 2 相同，但有一些例外：

1. 它加載了 bxslider.css

2. 有一個針對正確選擇器的覆蓋：

    /* Override */ .bx-wrapper.bx-wrapper { box-shadow: 0 0 0 transparent; border: 0 none transparent; background: none; }

box-shadow不需要前綴，請參閱caniuse 。 為了增加特異性，我在課程上加倍。 如果!important就像使用大錘，那么 double class 就是球頭錘。

---

更新

我重新閱讀了您的問題並注意到您在頁面頂部有滑塊，因此全屏在您的特定情況下無濟於事，Snippet 2 演示了 bxSlider 邊緣樣式。 請在整頁模式下查看兩個片段。

除以下規則集外，Snippet 1 中的所有內容都適用...

.bx-wrapper li {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: table;
}

...如果有任何具有background-size: cover背景圖像，它應該是background-size:contain 。 在此演示幻燈片 1 中，如前所述進行了更改。

基本上，將height: 100vh更改為height:auto並添加min-height ，其值根據您的布局而變化，但使用絕對值。 在某些情況下， min-height內在和相對值不能很好地鍛煉（例如絕對值：200px，內在值：20vh，相對值：20%）

---

以下規則集是您遇到問題的原因：

 /* REMOVE THIS RULESET
.bx-wrapper .bx-viewport {
    -moz-box-shadow: 0 0 0 #ccc;
    -webkit-box-shadow: 0 0 0 #ccc;
    box-shadow: 0 0 0 #ccc;
    border:  0;
    left: -40px;
    background: #fff;
*/

除非您刪除該規則集，否則不要使用 bxslider.css 樣式表。

---

我沒有使用<img>在每個<li>上使用background-image然后使用background-size來確保每個圖像都接觸滑塊的邊緣。

---

我添加的其余樣式以完善它的全屏顯示（這是一個詞嗎？）。 啟用鍵盤箭頭，禁用控件和尋呼機。 它將隨着鼠標拖動、觸摸和箭頭鍵移動。 AFAIK，您可以使用任何選項組合，它仍然可以正常運行。

片段 1 - 全屏邊緣

 $('.bx').bxSlider({ keyboardEnabled: true, pager: false, controls: false });

 *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; border: 0 none transparent; outline: 0 none transparent; } html, body { height: 100%; width: 100%; } .bx-wrapper { position: relative; margin: 0; padding: 0; overflow-y: hidden; } .bx-viewport { position: absolute; -webkit-transform: translatez(0); transform: translatez(0); left: 0; } .bx-wrapper li { width: 100%; height: 100vh; display: table; }

 <main class='bx-box'> <ul class='bx'> <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:cover;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'> </li> </ul> </main> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

片段 2 - 視口邊緣的頂部

 $('.bx').bxSlider({ keyboardEnabled: true, pager: false, controls: false });

 *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; border: 0 none transparent; outline: 0 none transparent; } html, body { height: 100%; width: 100%; } .bx-wrapper { position: relative; margin: 0; padding: 0; overflow-y: hidden; } .bx-viewport { position: absolute; -webkit-transform: translatez(0); transform: translatez(0); left: 0; } .bx-wrapper li { width: 100%; height: auto; min-height: 200px; display: table; }

 <main class='bx-box'> <ul class='bx'> <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:contain;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'> </li> </ul> </main> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

片段 3

 $('.bx').bxSlider({ keyboardEnabled: true, pager: false, controls: false });

 *, *::after, *::before { box-sizing: border-box; margin: 0; padding: 0; border: 0 none transparent; outline: 0 none transparent; } html, body { height: 100%; width: 100%; } .bx-wrapper { position: relative; margin: 0; padding: 0; overflow-y: hidden; } .bx-viewport { position: absolute; -webkit-transform: translatez(0); transform: translatez(0); left: 0; } .bx-wrapper li { width: 100%; height: auto; min-height: 200px; display: table; } /* Override */ .bx-wrapper.bx-wrapper { box-shadow: 0 0 0 tramsparent; border: 0 none transparent; background: none; }

 <link href='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css' rel='stylesheet'> <main class='bx-box'> <ul class='bx'> <li class='slide' style='background-image:url(http://imgh.us/transparent-map.png); background-size:contain;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/static.gif); background-size:cover;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/Lenna.png); background-size:contain;background-repeat:repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/your_logo_here.jpg); background-size:cover;background-repeat:no-repeat;background-position:center;'> </li> <li class='slide' style='background-image:url(http://imgh.us/gir_zim.gif); background-size:contain;background-repeat:no-repeat;background-position:center;'> </li> </ul> </main> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <script src='//cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js'></script>

Answer 2

更改 jquery.bxslider.css 文件或覆蓋 css (.bx-wrapper img)

.bx-wrapper img{
   width : 100%;
}

試一試。

它使用默認的 css 覆蓋。 如果您要鏈接任何其他 css，這可能是原因。 請向我們提供一些代碼，以便我們更好更快地為您提供幫助。

Answer 3

您必須覆蓋 bx-viewport 上的默認邊框

.bx-wrapper .bx-viewport{
   border: 0;
}

這應該刪除圖像周圍的白邊。 你可以在你的樣式表中覆蓋它而不是修改 jquery.bxslider.css。