CSS -如何设置标题图像作为使用例如。脸书？

Question

我想知道如何在我的网站上设置标题图像。最基本的问题是，假设我在我的笔记本上，宽度分辨率大约是1280px。我有一个标题图像，其宽度类似于2000px。

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

我目前的CSS设置是width: 100%; ->，这导致2000px宽度的图像在我的笔记本电脑上被裁剪-只显示了图像的2/3。

有没有办法将图像设置为始终适合显示？

Answer 1

您正在寻找以下css：

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

这会调整背景图像的大小，使其与容器大小相对应。

Answer 2

您可以应用media queries

浏览器窗口宽度小于1280px

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

浏览器窗口宽度大于1280px但小于2000px：

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

浏览器窗口宽度大于2000px：

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

所以..。根据需要自定义断点和宽度。

Answer 3

是的，使用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>