ブートストラップ - Jumbotronイメージのサイズを変更するデバイスの画面サイズに基づく背景のカバレッジ

Question

私はリスト結果を表示するためにブートストラップジャンクトロンを使用しています。このジャンボトロンは、最初に幅の50％と高さの100％をカバーするように設定された背景として画像を使用します。

style="width:80%;max-width:750px;min-height:220px; 
background:url({{ property.properties_pictures.property_image1.url }}); 
background-size:50% 100%;background-repeat:no-repeat; 
list-style-type:none;border:solid;border-width:1px;border-color:#d6d0ca;" 

は私が持っているデバイスのために幅を100％と高さの50％に背景画像の範囲を反転したいと思います：ジャンボトロンのHTMLのdivで実装スタイルのコードの下に見つけてください画面の幅は500ピクセル未満です。

ノー運とメディアクエリを使用してみました：

@media (max-width: @screen-sm-min) 
{ 
.jumbotron 
{ 
    background-size: 100% 50%;; 
} 
} 

誰もがこの上で役立つことができればそれは素晴らしいことです。

ありがとうございました。

Answer 1

あなたは希望このことができます。このformat--

@media only screen and (max-width:500px){ 
.jumbotron 
{ 
    background-size: 100% 50%;; 
} 
} 

であなたのメディアクエリを使用する必要があります！