背景尺寸:在某些手机上覆盖范围

时间:2019-02-19 20:36:52

标签: html css

我的网站标题的背景图片在某些手机上正在以奇怪的方式伸展和扭曲。

mobile view

这是指向网站的链接-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远程设备,我找不到解决它的正确方法。任何帮助将不胜感激。

2 个答案:

答案 0 :(得分:0)

尝试身高:自动;这会导致CSS保留图片的自然长宽比

答案 1 :(得分:0)

我认为是因为您需要将8设置为auto

bg {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    /* set your own */
    min-width: 1440px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Use this if you have your images set to fixed. It will promote the layer */
    transform: translate3d(0, 0, 0);
}