0

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

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

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

有什么方法可以将图像设置为始终适合显示？

4

3 回答 3

1

您正在寻找以下 CSS：

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

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

于 2012-12-31T00:07:07.430 回答
0

您可以应用媒体查询：

浏览器窗口宽度小于 1280px

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

浏览器窗口宽度大于 1280 像素但小于 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    
   }
}

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

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

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

于 2012-12-31T00:08:31.443 回答
0

是的，可以使用 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-31T00:08:58.727 回答