html - 背景大小 : cover stretching on certain phones

Question

我网站标题的背景图像在某些手机上以奇怪的方式拉伸(stretch)和扭曲。

这是网站的链接 - https://jaels-creations-stage.callgage.co/

这是背景图片的代码，它是标题容器的子元素:

.header .background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center 92%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;

  /* On Load Animation */
  opacity: 0;
}

我已经尝试解决这个问题很长时间了，我无法在我的 macbook 上复制它，并且使用 devtools 远程设备我无法找到修复它的正确方法。任何帮助将不胜感激。

Answer 1

尝试高度:自动；这将导致 css 保留图像的自然纵横比