0

ホームページに 1200px X 900px のヒーロー画像を配置しました。問題は、ブラウザのサイズを変更すると歪むことです。px、%、高さ、幅を 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です。Thanks -Adolfo

4

2 に答える 2

1

#heroimage {} には以下の CSS を使用してください

#heroimage {
  background-image: url("/../assets/img/heroVector.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
于 2016-01-12T07:46:51.657 に答える
1

ルールはその前background-size: 100% 100%;の行をオーバーライドしbackground-size: cover;、背景画像を強制的に div の形状に曲げます。したがって、 に固執するかbackground-size: cover;、他のbackground-size オプションのいずれかを選択してください。

于 2016-01-12T07:47:22.530 に答える