具有适当宽高比的全宽背景图像

时间:2013-09-25 15:27:36

标签: html css background-image

我在获取全宽背景图像以保持其正确的宽高比方面存在问题,而且我已经尝试了我能想到的所有内容。

您可以在此处查看正在使用的图片:http://bit.ly/1eH5EA1

在页面上,我有一个名为full-bg的CSS类图像。 (我使用图像的原因是页面是从Wordpress查询中随机调用图像,然后在页面HTML上显示文本,然后在页面HTML中显示。)

我使用的是相当标准的CSS我已经看到了所有的地方,但是当你将浏览器的大小调整到不同的宽度时,背景图像正在倾斜,所以宽高比不再正确。

以下是图片和CSS,我能做些什么?

<img class=​"full-bg active hide-for-small" src=​"/​wp-content/​uploads/​2013/​06/​Red.jpg">​

img.full-bg {
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.full-bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

注意: 我刚刚意识到可能导致问题的一个并发症。我在网站上使用Foundation,当屏幕尺寸缩小时会自动调整图像大小。它通常调整图像大小以保持其纵横比,但也许它会增加问题的复杂性?

2 个答案:

答案 0 :(得分:0)

我想你应该改变这个:

@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.full-bg {
left: 50%;
margin-left: -512px;   /* 50% */
  }
}

为此:

@media screen and (max-width: 1024px) { /* Specific to this particular image */
li:first-of-type {
left: 50%;
margin-left: -512px;   /* 50% */
  }
}

答案 1 :(得分:-1)

您应该使用background-size: contain;cover,具体取决于您的需求。更多信息:https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

请注意,如果它是背景图片,您实际上可能应该在容器上将其设为background-image