如何根据分辨率使页面加载不同的图像?

时间:2013-03-12 16:57:36

标签: html html5 joomla resolution

我正在研究this site。这是基于Joomla的,所以我不得不在尝试转换它时拿起一些新东西。我终于能够让它看起来像我想要的那样但是我有一些问题,因为主要背景(图像模块)宽2100px并且在宽分辨率上看起来很棒,但是对于较小的分辨率来说它是巨大的。

有没有办法在HTML(或其他)中编写代码,如果分辨率是这样,那么让模块显示这个图像等等?

2 个答案:

答案 0 :(得分:1)

我不知道在不同模块中加载,但您可以使用CSS媒体查询加载特定视口尺寸的新背景图像:

@media only screen and (min-width:0px) and (max-width:2099px)
{
    .my_image { background-image:MY_NEW_IMAGE; }
}

答案 1 :(得分:1)

尝试

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Demo

来自:Perfect Full Page Background Image,css3技术。