具有适当长宽比的全宽背景图片

debugcn 发表于 Dev

安德鲁

我在获取全角背景图像以保持其适当的宽高比时遇到问题，并且我已经尝试了我能想到的所有方法。

在页面上，我有一个图像，其中包含一个名为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，它会随着屏幕尺寸的缩小自动调整图像大小。它通常会调整图像的大小以保持其宽高比，但是可能会增加问题的复杂性吗？

可能上升

您应根据需要使用background-size: contain;或cover。此处的更多信息：https : //developer.mozilla.org/en-US/docs/Web/CSS/background-size

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。