响应式图像3列布局的问题

Question

I am a student and working on a school project. I'm working on a responsive grid with 3 columns whenever u resize the widow the image should stay at 100% and only be visible once.

I came into an error with it, when full screen it takes up the full width but when i resize the widow the section overlay each other and only come back to full width (like they are supposed to be at phone size, mediaquery)

code snippet:

 .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> 

Thanks in advance! Distortion

Answer 1

If I'm correct, this is what you are after. I make benefit of the 100vw and 100vh values.

vh 1/100th of the height of the viewport.
vw 1/100th of the width of the viewport.

Read more about length at MDN .

Together with the display: flex; property ( MDN reference ) it comes in handy to get the whole space filled out.

The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices.

Also, I started mobile first , so that the min-width is set to 700px , instead of the other way around. In that way you can scale easily to any size you want. You can also use calc(value) function to get 1/3th of the width of your screen width ( MDN reference ). In that case, replace the width: 33.3%; with 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 2

I'm not sure I 100% understand your question, but it sounds like your problem is the fixed-width of the background image? Try something like background-size: contain; in your .columns class, or giving the background-size some percentage values.

Answer 3

I upadated your media query and added a class="clearfix" to your container

 .container { width:100%; height:700px; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .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>