响应图像3列布局的问题

Question

我是一名学生，正在做一个学校项目。我是在一个响应网格与3列，每当你调整寡妇的大小，图像应该保持在100%，只有一次可见。

我遇到了一个错误，当全屏占据整个宽度时，但当我调整寡妇的大小时，重叠的部分彼此只会恢复到全宽度(就像他们应该在电话大小，媒体查询)。

代码片段：

​

.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

我不确定我100%理解你的问题，但听起来你的问题是背景图像的固定宽度？在您的background-size: contain;类中尝试类似于.columns，或者给出背景大小的一些百分比值。

Answer 2

如果我是对的，这就是你想要的。我利用了100vw和100vh值。

vh 1/100的视口高度。 vw 1/100的视口宽度。

阅读更多的关于MDN的长度。

与display: flex;属性(MDN参考)一起，填充整个空间是很方便的。

CSS3柔性盒或柔性盒是一种布局模式，提供页面上元素的排列，以便当页面布局必须容纳不同的屏幕大小和不同的显示设备时，元素的行为是可预测的。

另外，我首先启动了移动设备，这样min-width就被设置为700px，而不是相反。这样，您可以轻松地缩放到任何您想要的大小。您还可以使用calc(value)函数获得屏幕宽度(MDN参考)的三分之一的width。在这种情况下，将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

我更新了您的媒体查询，并向容器中添加了一个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>

​