html - 使用响应式设计保持背景图像固定

Question

如果你看看这里：

https://quirktools.com/screenfly/#u=http%3A//logan-gabriel.com&w=1600&h=900&a=1&s=1

屏幕右侧有一个小白边。这不应该是这种情况，因为背景图像应该完全固定到右边缘。如果您尝试其他较小的分辨率，您会注意到这是行为。但是一旦屏幕达到这么大的宽度（1600px），它就会失败。

任何想法为什么会发生这种情况？

多谢你们。

Answer 1

嘿，将图像宽度设置为自动

#image 
{
width:auto;//you have set 40% which causes the issue
}

Answer 2

您可以尝试使用以下方法

#image {
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}


#image img {
    float: right;
    width: 30%;
}

Answer 3

一旦屏幕进入“大”尺寸，使用媒体查询将宽度更改为自动

@media only screen and (min-width : 1430px){
    #image{
        width:auto;
        }
    }