響應式圖像3列布局的問題

Question

我是一名學生，正在做一個學校項目。 每當您調整寡婦的大小時，我都會在3列響應式網格上工作，圖像應保持100％且僅可見一次。

我遇到了一個錯誤，當全屏顯示時會占用整個寬度，但是當我調整寡婦的大小時，該部分會相互重疊，並且只會返回到全寬度（例如，它們應該是手機尺寸，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

如果我是正確的話，這就是你所追求的。 我利用了100vw和100vh值。

vh視口高度的1/100。
vw視口寬度的1/100。

了解有關MDN長度的更多信息 。

連同display: flex; 屬性（ MDN參考 ），它可以很方便地填充整個空間。

CSS3靈活框（即flexbox）是一種布局模式，用於在頁面上排列元素，以便當頁面布局必須容納不同的屏幕尺寸和不同的顯示設備時，元素的行為可預測。

另外，我首先開始移動 ，所以將min-width設置為700px ，而不是相反。 這樣，您可以輕松擴展至所需的任何大小。 您還可以使用calc(value)函數來得到的1 / 3TH width屏幕寬度（的MDN參考資料 ）。 在這種情況下，請替換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 2

我不確定我是否100％理解您的問題，但是聽起來您的問題是背景圖片的固定寬度？ 嘗試類似background-size: contain; 在您的.columns類中，或為背景尺寸設置一些百分比值。

Answer 3

我更新了您的媒體查詢，並向您的容器添加了class="clearfix"

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