是否有任何比例的响应全背景图像

是否有任何宽高比需要考虑全背景响应图像？图像尺寸为1361 X 1216 Original Image 是否有任何比例的响应全背景图像

下面是使用的CSS，

body{ 
background-image:url('../images/bg-img.jpg'); 
background-position:center center; 
background-repeat:no-repeat; 
background-attachment:fixed; 
background-size: contain; 
    }

但结果是background-size: contain

如果背景尺寸：盖中使用的图像的顶部和底部被裁剪。

来源

2017-01-30 Deepika Rao

请检查此：[如何创建一个最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve ） –

没有得到解决方案，我已经把图像放在如何显示结果，需要添加任何其他细节？ –

请提供您的html代码..例如codepen.io –

这应该做的伎俩;）

body { 
    background-image:url('../images/bg-img.jpg'); 
    background-position:center center; 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-size: 100% auto; 
}

背景尺寸：宽度高度;

编辑：你可以做这样的事情：

body{ 
background-image:url('https://i.stack.imgur.com/vLd20.jpg'); 
background-position:center center; 
background-repeat:no-repeat; 
background-attachment:fixed; 
} 
@media(min-width: 768px){ 
    body { 
    background-size: 100% auto; 
    } 
} 
@media(max-width: 767px){ 
    body { 
    background-size: 100% 100%; 
    } 
}

Codepen：http://codepen.io/anon/pen/BpJWOR

需要注意的是 “100％100％” 会不成比例地拉长的背景。您可以在“最大宽度767像素”部分使用“自动100％”

您也可以尝试110％或更高。只是不断尝试，直到它完美的外观...欢迎来到响应网页设计：P

来源

2017-01-30 09:39:57

它仍然收获图像的顶部和底部部分 –

请提供您的html代码。那么我会再看看..例如与codepen.io –

如果你不想裁剪图像的底部和顶部，你应该将高度设置为100％，宽度为自动像“background-size：auto 100 ％;”如果这没有帮助，我需要看看你的代码。 –

是否有任何比例的响应全背景图像

回答

相关问题