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

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