当用户的设备宽度超过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
您可以制作小提琴或其他什么东西吗? –