大ヒーローのベストプラクティス - 高さを設定しますか？

Question

この記事は実際にはコードの問題ではありませんが、私は解決や説明が必要ですが、他のフロントエンドの開発者や開発者からのビルド方法やページ上で大きなヒーローを作成する方法についての一般的なフィードバックがあります。 6ヶ月前まで、私はいつも彼らの大ヒーローの上にないセット高さを行う理由として、私は私の注意に持って来ら別の開発者とのいくつかの時間を費やしてまで、私の大きな主人公の上の高さを設定し、することを選択します最大

パッディングの設定...と彼の理由は有効で、それは本当に私の目を開いた。

他の誰もこの方法で大きなヒーローにアプローチしていますか、なぜ、あるいは別のプロセスがあるのでしょうか？

私は...これは、他の開発者が出始めて助けたり、私はちょうど要素/資産などを開発する別の方法に出くわしたようになりますフィードバック（もしあれば）を事前に

感謝を願っています。

Answer 1

私はこの質問が非常に広いと思います。私の個人的なアプローチは次のとおりです。

• vw（ビューポートの幅）の英雄イメージブロックの幅を設定します。
• ヒーローイメージの高さをvh（ビューポート高）値で設定します。
• 「ヒーローイメージ」セクションのイメージを、背景サイズがカバーで、通常は中央の位置である背景イメージに設定します。経験則として
、英雄のテキストを避けるためにいくつかのパディングを追加するには
• パディングがヒーローの画像内のテキストを整列させるために良いです発行

あなたはここに私のコードを確認することができます。

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two'); 
 

 
*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.hero-wrapper{ 
 
    width: 100vw; 
 
    padding: 45vh 0px; 
 
    background-image: url("https://images.unsplash.com/photo-1491456804546-53e89147138e?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg="); 
 
    background-size: cover; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.text-wrapper{ 
 
    display: block; 
 
    width: 30%; 
 
    margin: 0px auto; 
 
    vertical-align: middle; 
 
    background: transparent; 
 
    border: 3px solid white; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
    text-shadow: 2px 2px 2px brown; 
 
} 
 

 
.text{ 
 
    vertical-align: middle; 
 
    font-size: 3rem; 
 
    color: brown; 
 
    font-family: 'Yellowtail', cursive; 
 
    font-family: 'Shadows Into Light Two', cursive; 
 
}

<div class="hero-wrapper"> 
 
    <div class="text-wrapper"> 
 
    <span class="text">Hero image</span> 
 
    </div> 
 
</div>