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

Posted 2023-03-05

【中文标题】如何在更改屏幕宽度的同时保持响应式背景图像高度？

【英文标题】：How to maintain responsive background image height while changing screen width?

【发布时间】：2021-10-06 11:13:18

【问题描述】：

我一直在努力定位背景图像，但只有在网页窗口调整到其最小宽度时才能正确定位图像。当我调整浏览器窗口的大小时，图像的所有边长都会被剪裁。照片的高度远大于其宽度（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 上教给我的，尽管它提供了迄今为止最好的结果。我已经添加了一个链接到您想要查看的图像包。这是我自己拍的照片，所以我希望提供的链接是有用的。

【问题讨论】：

我真的不明白你想在这做什么

要不要换小屏的背景图

我想保持照片的长度，而不是根据浏览器大小缩放图像

在那种情况下@Shiratorizawa 的回答是正确的

因为这是一个背景图像，您是否希望它完全覆盖视口的整个宽度并保持（相关）全长，这样就不会被裁剪？如果是这样，您是否希望网站可以滚动，以便用户始终可以看到完整的图像并且网站的大小适合它？

【参考方案1】：

当 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 中都没有得到适当的支持，并且使背景在 ios 上看起来“模糊”。所以这个 sn-p 把它去掉了。

【参考方案2】：

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

【参考方案3】：

如果我正确理解了这一点，您希望图像以您想要的所有尺寸正确显示吗？

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

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