レスポンシブな画像の問題3列のレイアウト

Question

私は学生で、学校のプロジェクトに取り組んでいます。私は画像が100％のままで1度しか見えないはずのウィジェットをサイズ変更するときはいつでも、3列の反応性グリッドに取り組んでいます。

フルスクリーンで全画面を表示するとエラーが発生しましたが、ウィジェットのサイズを変更すると、セクション全体がオーバーレイされ、元のサイズに戻ってしまいますmediaquery）

コードスニペット：事前に

.container { 
 
    width:100%; 
 
    height:700px; 
 
} 
 
.columns { 
 
    float:left; 
 
    width:33.33%; 
 
    height:100vh; 
 
} 
 
.blue { 
 
    background-color: #92d2fc; 
 
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800); 
 
} 
 
.yellow { 
 
    background-color: #fad74e; 
 
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800); 
 
} 
 
.red { 
 
    background-color: #f88888; 
 
    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=460%C3%97800&w=460&h=800); 
 
} 
 
.blue img, .red img, .yellow img { 
 
    width:100%; 
 
} 
 

 
@media screen and (max-width: 700px){ 
 
    .columns { 
 
    width:100%; 
 
    } 
 
}

<div class="container"> 
 
    
 
<section class="columns blue"> 
 
<h3>About us</h3> 
 
<p class="margin-top">How the gym became a reality</p> 
 
</section>  
 

 
<section class="columns yellow"> 
 
<h3>Manifesto</h3> 
 
<p class="margin-top">Respect the rules</p> 
 
</section>   
 
    
 
<section class="columns red"> 
 
<h3>Contact us</h3> 
 
<p class="margin-top">Have a chat with us</p> 
 
</section>  
 
    
 
</div>

ありがとう！ 歪み

Answer 1

と交換しているのですか？ .columnsクラスにbackground-size: contain;のようなものを試してみるか、バックグラウンドサイズにパーセント値を指定してください。

Answer 2

私が正しい場合、これはあなたの後です。私は100vwと100vh値の恩恵を受ける。

vhビューポートの高さの1/100です。
vwビューポートの幅の1/100。

続きを読むabout length at MDN。

display: flex;プロパティ（MDN reference）と一緒に、全体のスペースを入力するのに便利です。

CSS3フレキシブルボックス、またはフレキシボックスは、ページのレイアウトが異なる画面 サイズと異なる表示デバイスに対応しなければならないときに要素が予想 に動作するように、ページ上の要素の 配置を提供するレイアウトモードです。

min-widthが周りの代わりに他の方法で、700pxに設定されているように、また、私は、モバイル最初を開始しました。この方法で、任意のサイズに簡単に拡大縮小することができます。 calc(value)機能を使用して、画面の幅（MDN reference）のwidthの1/3を取得することもできます。背景画像の固定幅は、その場合、私は100％あなたの質問を理解していないが、それはあなたの問題のように聞こえるwidth: 33.3%;width: calc(100%/3);

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.wrapper { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 

 
.columns { 
 
    width: 100%; 
 
} 
 

 
.blue { 
 
    background-color: #92d2fc; 
 
} 
 

 
.yellow { 
 
    background-color: #fad74e; 
 
} 
 

 
.red { 
 
    background-color: #f88888; 
 
} 
 

 
@media screen and (min-width: 700px) { 
 

 
    .container { 
 
    width: 100%; 
 
    height: 100%; 
 
    flex-flow: column wrap; 
 
    } 
 

 
    .columns { 
 
    height: 100%; 
 
    width: 33.3%; 
 
    } 
 
}

<div class="wrapper"> 
 

 
    <div class="container"> 
 

 
    <section class="columns blue"> 
 
     <h3>About us</h3> 
 
     <p class="margin-top">How the gym became a reality</p> 
 
    </section> 
 

 
    <section class="columns yellow"> 
 
     <h3>Manifesto</h3> 
 
     <p class="margin-top">Respect the rules</p> 
 
    </section> 
 

 
    <section class="columns red"> 
 
     <h3>Contact us</h3> 
 
     <p class="margin-top">Have a chat with us</p> 
 
    </section> 
 

 
    </div> 
 
</div>

Answer 3

私はあなたのメディアクエリをupadatedし、単一のコード行は、私の問題を修正していること、あなたのコンテナ

.container { 
 
    width:100%; 
 
    height:700px; 
 
} 
 
.clearfix:after { 
 
\t visibility: hidden; 
 
\t display: block; 
 
\t font-size: 0; 
 
\t content: " "; 
 
\t clear: both; 
 
\t height: 0; 
 
\t } 
 

 
.columns { 
 
    float:left; 
 
    width:33.33%; 
 
    height:100vh; 
 
} 
 
@media screen and (min-width: 700px){ 
 
.blue { 
 
    background-color: #92d2fc; 
 
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg); 
 
} 
 
.yellow { 
 
    background-color: #fad74e; 
 
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg); 
 
} 
 
.red { 
 
    background-color: #f88888; 
 
    background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg); 
 
} 
 
    } 
 
.blue img, .red img, .yellow img { 
 
    width:100%; 
 
} 
 

 
@media screen and (max-width: 700px){ 
 
    .columns { 
 
    width:100%; 
 
    } 
 
    .container{ 
 
     background-image: url(http://previews.123rf.com/images/jaysi/jaysi1112/jaysi111200023/11753777-Golden-temple-near-beautiful-lake-Japan-Vertical-image-Stock-Photo.jpg); 
 
     background-size:cover; 
 
    height:auto; 
 
    } 
 
}

<div class="container clearfix"> 
 
    
 
<section class="columns blue"> 
 
<h3>About us</h3> 
 
<p class="margin-top">How the gym became a reality</p> 
 
</section>  
 

 
<section class="columns yellow"> 
 
<h3>Manifesto</h3> 
 
<p class="margin-top">Respect the rules</p> 
 
</section>   
 
    
 
<section class="columns red"> 
 
<h3>Contact us</h3> 
 
<p class="margin-top">Have a chat with us</p> 
 
</section>  
 
    
 
</div>