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

如果我是对的，那就是你所追求的。我受益于100vw和100vh值。

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

了解更多about length at MDN。

与display: flex;属性（MDN reference）一起使用它可以很方便地填充整个空间。

CSS3 Flexible Box或flexbox是一种布局模式在页面上排列元素以使元素表现出来可预见的是，页面布局必须适应不同的屏幕尺寸和不同的显示设备。

此外，我首先启动了移动设备，因此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％理解您的问题，但听起来您的问题是背景图片的固定宽度？在background-size: contain;课程中尝试.columns之类的内容，或者为背景大小指定一些百分比值。

Answer 3

我更新了您的媒体查询，并在您的容器中添加了class="clearfix"

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: