如何刪除水平滾動條？

當用戶的設備寬度超過480px時，我會向他展示原始的GIF作爲我的網站的背景。如何刪除水平滾動條？

我的HTML：

<img class="background" src="assets/img/960XAUTO.gif" alt="Pink Smoke Background">

我的CSS：

.background { 
    display: block; 

    height: 100%; 
    margin: 0 auto; 
}

當用戶的設備寬度小於480像素我增加了我的GIF的寬度爲200％，因爲在不增加煙看起來很commpessed和瘦：

所以，我做這在我的CSS：

@media screen and (max-width: $breakpoint) { 
    .background { 
     position: absolute; 
     left: -50%; 

     max-width: 200%; 
    } 
}

而這是一個問題。隨着我的GIF增加了2倍，我得到了水平滾動條。只要看看：

我真的需要增加GIF，使煙看起來更加廣泛。如何刪除由GIF創建的右側的空白位置？或者也許有其他方法可以增加GIF的寬度？我試圖以不同的方式使用overflow。此外，我試圖設置寬度100％的設備屏幕body。

來源

2016-03-07 Turak Vladyslav

爲什麼不直接使用'background'屬性，而不是實際的形象？ – Roope

您可以發送圖片gif的url或至少是gif的實際尺寸 – Ody

您可以製作小提琴或其他什麼東西嗎？ –

添加到您的CSS，指的是你所需要的元素（它應該是整個html或body就像這個例子，如果這是你的整個網站的背景，順便說一句）：

html, body { 
    overflow-x: hidden; 
}

來源

2016-03-07 15:05:51 prtnkl

添加background-attachment:fixed;在你的風格

代碼的確切：

.background { 
     display: block; 
     background-attachment:fixed; 
     height: 100%; 
     margin: 0 auto; 
}

來源

2016-03-07 15:09:14

它沒有幫助我。但是我在媒體規則中將'position：absolute'改爲'fixed'，現在它適用於我！ –

你應該嘗試使用後臺中心可選縮放百分比。完整的編輯就在這裏https://plnkr.co/edit/wZZqiC3awyEzHLPpxYBI

.bg{ 
    width: 100%; 
    height: 100%; 
    background: no-repeat center/80% url("http://m.gdz4you.com/sandra/assets/img/960XAUTO.gif"); 
    background-size: cover; 
}

和ofcourse剛落，一個div

<div class="bg"></div>

來源

2016-03-07 16:14:42 Ody

如何刪除水平滾動條？

回答

相關問題