フロントページヒーローの背景画像がモバイルで不適切に縮尺された

Question

私のWordPressのサイトでは、フロントページヒーローの背景がモバイルデバイス（iOSとAndroid）上で不適切に拡大縮小されています。完全なイメージではなく、イメージの一部しか表示しません。 は、私が試してみました：画像

の解像度とサイズ-changing

からUnwanted scaling on mobile devicesを

（メタタグしかしpropegated変更なしを挿入、はい、私はあまりにもキャッシュをクリア） - Site scaling on a mobile deviceを（私がテストを試してみましたUSBのデバッグでCSSが変わるが動作しなかった）

私はUnited Themesによって作成されたブルックリンテーマを使用しています。このサイトでは、Visual Composerも使用しています。

サイト：https://www.wearerubbish.com

現在のCSS

@media (max-width: 767px) 
.parallax-section { 
    background-position: center center !important; 
    background-repeat: repeat-y !important; 
    /* background-attachment: fixed !important; */ 
    background-size: cover !important; 
} 

Answer 1

例は、の値でmax-widthプロパティを追加することによって、私たちはコードを見てみることができますが、通常、私はこれらの問題を解決するとよいでしょうヒーローが全幅で、<img>タグの場合は100vwです。しかし、画像がbackground-imageの場合、background-size: cover;はうまくいくでしょう。

Answer 2

あなたはそれがすでにバックグラウンドサイズに設定されているこのCSS

.hero .parallax-scroll-container { 
    background-size: contain!important; 
}