全幅画像を反応性にするには？（縮尺/ストレッチなし）

私はレスポンシブルデザインについて学びましたが、かなり簡単です。しかし、理解していないことが1つあります。私は私のホームページの中心に大きなフルサイズの画像を持っています。それは一定のサイズを持ち、CSSはピクセル単位のサイズを必要としているようです - ％で入力すると表示されません。今私は、しかし全幅画像を反応性にするには？（縮尺/ストレッチなし）

.picture-main { 
    /*background-color: gray;*/ 
    background-image: url("./images/homepage_main_picture.png"); 
    background-repeat: no-repeat; 

    background-position: center; 
    background-size: cover; 

    padding-right: 0; 
    margin-right: 0; 
    padding-left: 0; 
    margin-left: 0; 
    width: 100%; 
    height: 250px; 
}

を持って応答性を確認するために、私は私のブラウザウィンドウのサイズを変更した場合、それは恐ろしい探して、それに応じて&ストレッチをスケーリングし、画像が歪んでしまうためにそう

。誰かが解決策を持っていますか？

PS：ここで他の答えは私の質問に、または少なくとも私は信じていませんstackoverflow上の注意してください。例えばthis one hereであり、これはまた、「ハウツー・メイク・ア・フル・ワイド・イメージ・レスポンス」と題されている。 - 多分私の質問を間違って言いましたか？

出典

2016-11-23 George Welder

CSSで –

に ';;;'を使用しないでください。ここでこれを見つけられなかったことを明示的に指摘すると、なぜ私はこれを重複としてマークしますか？にリンクされていますか？ダブル ;コードではなく、私のstackoverflowポストのエラーでした。バックグラウンドサイズのカバーは、ブラウザのウィンドウサイズに応じて伸びて奇妙に見える問題を解決しません。 –

申し訳ありませんが、私は何かが不足しているようです。再オープンしました... –

background-size: contain;このようにすると、バックグラウンドイメージでその比率が維持されます。これについて移動する

.picture-main { 
 
    background: url("//placehold.it/500x300/cf5") no-repeat 50%; 
 
    padding: 0; margin: 0; 
 
    width: 100%; 
 
    height: 250px; 
 
} 
 

 
.contain{ 
 
    background-size: contain; 
 
} 
 
.cover{ 
 
    background-size: cover; 
 
}

Example using background-size: contain 
 
<div class="picture-main contain"></div> 
 

 
Example using background-size: cover 
 
<div class="picture-main cover"></div>

出典

2016-11-23 23:34:21

私に手伝ってくれてありがとう！私はちょうどそれを試みたが、これは画像の全幅を取り除く。今私は両側に境界線を持っています。 –

一つの方法は、幅の割合としての要素の高さを設定することです。

例えば：

1）は要素の幅は、ビューポートの幅の100％です。

2）元の画像が幅の半分の高さである場合、要素の高さをビューポートの幅の半分に設定できます。

.picture-main { 
height:50vw; 
}

1 vw =ビューポート幅の1倍。 50vw =ビューポート幅の50％。

これは、要素に正しいサイズと比率を与えます。 "background-size：cover;"バックグラウンドが確実に満たされるようにします。

出典

2016-11-24 18:08:52

全幅画像を反応性にするには？ （縮尺/ストレッチなし）

答えて

関連する問題

全幅画像を反応性にするには？（縮尺/ストレッチなし）