2017-07-10 6 views
0

私は2日間、自動高さの適合がどのように動作するかを理解しようとしましたが、私は背景をブラウザに合わせる方法を理解していますが、thisバナースライダーでは、私は手がかりがありません。このバナースライダをブラウザの高さに合わせるにはどうすればいいですか?

誰かが私の目を/始めるべきか教えてください。 CSSまたはJSである必要がありますか?

私は非常に新しいですHTML5/CSS3Wordpress私はウェブサイトを開始する非常に簡単な環境を与えましたが、私はほとんどプラグイン以外のウェブサイトを変更する方法を知っています。

スライダ部はこのように事前に1

wanted result 下記のおかげに合わせてあればそれは非常にクールになります!

+1

あなたはここで多くの投票権を得るでしょう。質問をする方法についてのチュートリアルを確認してください。 – Jonathan

+0

ジョナサンさん、ありがとう、私はあなたの修正を受け入れました。スレッドは私を許さなかったここに画像を添付すると、あなたが助けてくれてうれしいです。 – Kit

答えて

0

ホームページの画像/アルバムをブラウザの高さと幅に設定し、CSSの一部を調整してください。サイドバーと完全に整列する必要があります。

img { 
     max-width: 100%; 
     height: auto; 
     width: auto\9; 
    } 
+0

あなたのアドバイスをいただきありがとうございますMrShedford。私はid#grid-1024でそれを見つけようとしましたが、style.cssに以下のようにしましたが、それでも動作しません。多分私は間違ったIDを見つけましたか? #grid-1024 { 最大幅:100%; 身長:自動; 幅:自動\ 9; } – Kit

0

あなたは、あなたがthis css unitsページから「VH」ユニットを使用することができますに関係なく、任意のディスプレイのブラウザの高さに合った画像を探している場合。

あなたのケースでは、あなたがこのように画像のため100VH使用できるように、VHは、ビューポートの高さを意味し、ビューポートの高さの1vh = 1%[ビューポート=ブラウザのウィンドウサイズを。]:

img{ 
    height: 100vh; 
} 

チェックこの同じjsfiddleのために。

高解像度の画像が必要であり、これらの画像は携帯端末ではうまく見えません。

+0

あなたのアドバイスをお寄せいただきありがとうございます。私はid#grid-1024でそれを見つけようとしましたが、style.cssに以下のようにしましたが、それでも動作しません。多分私は間違ったIDを見つけましたか? #grid-1024 { 高さ:100vh; } 「グリッド」と呼ばれる「Wordpress」プラグインがインストールされていて、それが異なるように見えるだけで、背景画像を高さに合わせることができます。 – Kit

+0

あなたのページ上の他のスタイルが、より特定のセレクタで高さを制御しているかもしれません。これを解決するには、 '#grid-1024 { height:100vh!important; } ' –

関連する問題