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

Question

我是一名学生，正在从事一项学校项目。每当你调整寡妇的大小时，我正在使用一个具有 3 列的响应式网格，图像应该保持在 100% 并且只可见一次。

我遇到了一个错误，当全屏时它占据了整个宽度，但是当我调整寡妇的大小时，该部分相互重叠并且只恢复到全宽（就像它们应该在 phone 大小，媒体查询）

代码段：

.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/100th of the height of the viewport.
vw 1/100th of the width of the viewport.

阅读更多内容 about length at MDN。

连同 display: flex; 属性 (MDN reference) 它可以方便地填写整个 space。

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.

此外，我首先启动了 移动设备 ，因此 min-width 设置为 700px，而不是相反。通过这种方式，您可以轻松地缩放到您想要的任何大小。您还可以使用 calc(value) 函数获得屏幕宽度 width 的 1/3 (MDN reference)。在这种情况下，将 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% 理解您的问题，但听起来您的问题是背景图片的固定宽度？在 .columns class 中尝试 background-size: contain; 之类的东西，或者给背景大小一些百分比值。

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>

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

Problems with responsive image 3 column layout

html

css

responsive