如何在更改屏幕宽度时保持响应式背景图像高度？

Question

我一直在努力定位背景图片，但只有在网页 window 调整到其最小宽度时图片才能正确定位。当我调整浏览器 window 时，图像的所有边长都被裁剪了。照片的高度远大于其宽度 (1391 x 2471)。我想我可能必须合并一个垂直滚动条？该网站是为移动平台设计的，但我将主要在计算机显示器上查看和设计它。我如何保持 Min 图像的完整性。浏览器的最大宽度。浏览器的宽度？

* { margin: 0;
    padding: 0;
}

html {
background: url("image.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我的 CSS 图像定位代码是在 CSS-Tricks 上教给我的，尽管它提供了迄今为止最好的结果。我在您要查看的图片中添加了 link。这是我自己拍的照片，所以我希望提供的 link 能正常工作。

Answer 1

如果我没有理解错的话，您希望图像在您想要的所有尺寸上都能正确显示吗？

在这种情况下，您可以使用 @media 查询。

@media(max-width: your max width in px) {
    /*And here change the height and width so that it doesn't look weird*/
}

Answer 2

body{
    background: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

Answer 3

您需要让 html 元素（或任何您希望 img 显示的元素）在img 具有视口的全宽 (100vw)。

如果您知道图像的纵横比，就可以做到这一点。在这种情况下，您知道原件的自然宽度和高度，因此如果您将这些尺寸作为变量，则可以通过 CSS 计算纵横比。

这是一个使用您的 CSS 设置的示例（请参阅下面的警告）：

* {
  margin: 0;
  padding: 0;
}

html {
  --imgw: 1391;
  --imgh: 2471;
  width: 100vw;
  min-height: calc(100vw * var(--imgh) / var(--imgw));
  /* make sure the whole height of the image is always shown */
  background-image: url(https://picsum.photos/id/1015/1391/2471);
  background-size: cover;
}

HELLO

警告：您的 CSS 中已修复背景。这有两个问题：它使元素不可滚动，并且在任何情况下它在 Safari 中都没有得到正确支持，并且使背景看起来 'fuzzy' on IOS。所以此代码段已将其删除。

如何在更改屏幕宽度时保持响应式背景图像高度？

How to maintain responsive background image height while changing screen width?

html

css

image

responsive-design

responsive