浏览器调整大小时的英雄图片倾斜

Question

我在主页上放了一张 1200px X 900px 的主图。问题是当我调整浏览器大小时它会倾斜。我试过将像素、%、高度和宽度设置为 100%，但似乎没有任何效果。有什么想法吗？

Html:

    <!--Hero-->
<div id="heroimage">
    <div class="row">
        <div class="small-12 small-centered columns">
            <br>
            <div class="heroText">
                <h1>Adolfo Barreto</h1>
                <h4>Web Designer</h4>
            </div>
        </div>
    </div>  
</div>
<!--End Hero-->

css:

    // Hero
 html, body, #heroimage{
   width:100%;
   height:100%;
 }

.heroText {

    text-align: center;
    color: white;
    margin-top: 50%;
    margin-bottom: 50%;
}

#heroimage{   

  background: url('/../assets/img/codeHero.0.jpg') no-repeat center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-size: 100% 100%;
}
//end hero

我的网站地址是 http://adolfobarreto.atwebpages.com 谢谢阿道夫

Answer 1

请使用下面的 CSS #heroimage {}

#heroimage {
  background-image: url("/../assets/img/heroVector.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 2

您的 background-size: 100% 100%; 规则覆盖了它前面的 background-size: cover; 行，并强制背景图像弯曲成 div 的形状。所以要么坚持 background-size: cover;，要么选择另一个 background-size options.

浏览器调整大小时的英雄图片倾斜

Hero image Skewes on browser resize

html

css

zurb-foundation

zurb-foundation-6