全屏图像在移动设备上看起来不太好

Question

我的网站http://asebratenpark.no 有一个带有全屏照片的主页（主索引文件）。我真的很喜欢它在桌面上的样子。但真的不喜欢它在智能手机上的样子。

我正在考虑使用查询来删除在智能手机上触发的全屏规则。

这是一个想法吗？如果是这样，我有点不确定我应该如何进行。

Answer 1

一些可能的解决方案：

1) 使用 CSS 中的媒体查询来加载较小的图像（无论如何你都应该这样做），这样可以：

@media only screen
and  (max-width: 640px)
{
    .background {
        background-image:url('ultrasmall.jpg');
    }
}
@media only screen
and (min-width : 641px) and (max-width: 800px)
{
   .background {
    background-image:url('smaller.jpg');
    } 
}

等等。对于其他屏幕/窗口尺寸。

2)

您还可以使用 CSS3 图像大小规则来设置图像以适应屏幕大小，因此使用 background-size: cover; 或 background-size: contain; 最适合您的需求。

见http://www.w3schools.com/cssref/css3_pr_background-size.asp

@media only screen
    and  (max-width: 640px)
    {
        .background {
            background-image:url('ultrasmall.jpg');
            background-size:cover;
        }
    }