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

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;
        }
    }