0

我在获取全宽背景图像以保持其正确的纵横比时遇到问题，我已经尝试了几乎所有我能想到的东西。

在页面上，我有一个名为 full-bg 的 CSS 类的图像。（我使用图像的原因是页面从 Wordpress 查询中随机调用图像，然后在其顶部显示文本，稍后在页面 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，它会随着屏幕尺寸的缩小自动调整图像大小。它通常会调整图像大小以保持其纵横比，但也许它增加了问题的复杂性？

4

2 回答 2

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% */
  }
}
于 2013-09-25T15:49:59.327 回答
-1

您应该使用background-size: contain;or cover，这取决于您的需要。更多信息：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size

请注意，如果它是背景图像，您可能实际上应该将其设置background-image在容器上。

于 2013-09-25T15:30:31.913 回答