CSS - 如何设置标题图像使用例如。 Facebook的？

我想知道如何在我的网站上设置标题图片。基本问题 - 假设我在我的笔记本电脑上 - 宽度分辨率大约为1280像素。我有一个像2000像素的宽度的标题图像。CSS - 如何设置标题图像使用例如。 Facebook的？

我想实现的是，在我的笔记本电脑上将这个标题图像重新调整到1280像素，并在我的LCD显示器上（宽度分辨率为±1900像素）显示1900像素的图像 - 我的意思是两种情况都适合显示。

我当前的CSS设置是width: 100%; - >这会导致在我的笔记本电脑上裁剪2000像素宽度的图像 - 仅显示图像的2/3。

有没有什么办法可以设置图像始终适合显示？

2012-12-31 user984621

您正在寻找下面的CSS：

.headerimage{ 
    background-image: url(...); 
    background-size: contain; 
}

这个大小调整的背景图像与容器大小相符。

来源

2012-12-31 00:07:07

我认为最直接和最彻底的方法，谢谢。 – user984621

它是否适用于CSS2？ –

您对“CSS2”有什么意思？如果您正在寻找浏览器支持，请参阅http://caniuse.com/#search=background-size –

你可以申请media queries：

浏览器窗口宽度小于1280px

@media (max-width: 1280px) { 
    #myHeader { 
     width: 50% // resize it to 50% when the browser screen is **LESS** than 1280px 
    } 
}

浏览器窗口宽度大于1280px超过2000像素大，但小：

@media (min-width: 1280px) and (max-width: 2000px) { 
    #myHeader { 
     width: 75% // resize image at 75% when the browser screen is **BETWEEN** 1280px and 2000px  
    } 
}

浏览器窗口宽度小于2000像素大：

@media (min-width: 2000px) { 
    #myHeader { 
     width: 100% // resize header to 100% when screen is **LARGER** than 2000px 
    } 
}

等等。根据需要自定义断点和宽度。

来源

2012-12-31 00:08:31 jviotti

是有可能使用javascript：

<script> 
// first set viewport width and viewport height to vpw and vph 
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],vpw=w.innerWidth||e.clientWidth||g.clientWidth,vph=w.innerHeight||e.clientHeight||g.clientHeight; 

d.getElementById("your_image_id").style.width(vpw+"px"); 
</script>

来源

2012-12-31 00:08:58

CSS - 如何设置标题图像使用例如。 Facebook的？

回答

相关问题