如何删除水平滚动条？

问题描述：

当用户的设备宽度超过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。

为什么不直接使用'background'属性，而不是实际的形象？ – Roope

您可以发送图片gif的url或至少是gif的实际尺寸 – Ody

您可以制作小提琴或其他什么东西吗？ –

答

添加到您的CSS，指的是你所需要的元素（它应该是整个html或body就像这个例子，如果这是你的整个网站的背景，顺便说一句）：

html, body { 
    overflow-x: hidden; 
}

答

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

代码的确切：

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

它没有帮助我。但是我在媒体规则中将'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>

如何删除水平滚动条？

相关推荐