web-dev-qa-db-ja.com

画像をブラウザのサイズに合わせて拡大できません！

この背景画像がこのページでブラウザのサイズに適切に拡大縮小されない理由について誰かが洞察力を持っている場合、それは本当に役立ちます。私は困惑しています！私はCSSとHTMLにかなり慣れていないので、何か助けが必要です。

私がこれを理解するのを助けることができる人は誰でも、Paypalに数ドルを喜んでいます。さらに情報が必要な場合はお知らせください！これは、ナビゲーションバーのすぐ下にあるコンピューターの画像です。 http://codesilver.us

responsive-webdesignscalability
1
Dezryth

ここでの問題は、背景の相対的な幅を設定していないことです。あなたはそれを配置していますが、幅を設定していません。次のようにbackground-sizeプロパティを使用してサイズを設定できます。

.newheader{
    background-size:100% 100%;
}

または、他の背景プロパティと組み合わせるには：

.newheader{
    background:url("../img/slide1.jpg") no-repeat scroll center center / 100% 100% auto #3E4549 !important;
}

他のオプションは、デバイス/画面サイズに応じて、背景に固定幅を使用することです。たとえば、画面サイズが480px以下の場合、背景の幅を幅400ピクセルに設定できます。

@media only screen and (max-width : 480px) {
.newheader{
        background-size:400px 100%;
    }
}

それがあなたを始めるはずです、あなたはイメージ自体の更新を含むあなたが必要なものにそれを微調整する必要があるかもしれません...

お役に立てれば。

2
lukeocom