视差背景不会定向人像比它的身边其他任何方式

Question

我有我试图用我的初始视差风格的背景不会改变方向的图像。这是一个为人像合适的宽高比，但没有办法，我编辑的代码或图像本身就不会停止转动。

我用我的CSS代码转换尝试，我尝试了整个的z-index和WebKit线，我终于明白了，那些不会反正工作。我不知道什么尝试。

            .parallax1 { 
      /* The image used */
      background-image: url("me.jpg");

      /* Set a specific height */
      height: 600px; 
      /* Create the parallax scrolling effect */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

预期成果应该是我的肖像的景观导向的版本。纵横比是正确的这种类型的图像的，但相片仍然伸展并接通画像。

Answer 1

你可能想创建一个的jsfiddle来证明这一点，但它是最有可能的背景属性您background-size: cover;值可以确保图像将填满你的整个容器，同时保持纵横比。因为你只您的容器上所限定的高度的宽度自然是“100％”（因为div的是块元素）。如果你的视口或容器的父级比窄结束了更加广阔所以将你的背景图片：

https://jsfiddle.net/w4x3bq61/

你可以解决的方法之一是设置.parallax1的宽度以及因此它总是有一个较高的高度宽度VS如：

.parallax1 { 
  /* The image used */
  background-image: url("");

  /* Set a specific height */
  height: 600px; 
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 300px;
}