CSS - 在屏幕上伸展的砌体图像

时间：2017-10-05 11:00:39

标签： html css css3 responsive-design

我正在使用CSS砌体安排一组8个图像的网站部分。它看起来我想要的除了宽度 - 我希望图像在屏幕上伸展。 我检查了控制台，似乎有.wrapper容器的边距设置，但我似乎无法删除它。我想要其他所有东西 - RWD也按照我的要求设置。 这是代码 - 

.brick h2 {

  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 25px;
  
}


/* Partners page */



.masonry { /* Masonry container */
    column-count: 4;
   
}


.brick img {
	width: 100%;
	height: 100%;
}

body {
    
    font-family: 'Gotham-Light';
    margin: 0;
    background: #fff;
}

.wrapper {
    width: auto;
    margin: 3em auto;
}

.masonry {
    margin: 1.5em 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: .85em;
    vertical-align: bottom;
}

.brick {
   display: inline-block;
    margin: 0 0 1em;
    width: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


/* Image words / text hover effect */ 

 .brick {
  
  opacity: .99;
  position: relative;

  
}

.brick:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}


 .brick img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}



 .brick .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.brick .details span {
  /* display: block; */
  opacity: 0;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

 .brick .details #title {
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

 .brick .details #info {
  line-height: 1.2;
  font-weight: 500;
  font-size: 10px;
}

.brick:focus:before,
  .brick:focus span, .brick:hover:before,
 .brick:hover span {
  opacity: 1;
}
 .brick:focus:before, .brick:hover:before {
  top: 50%;
}

 .brick:focus span, .brick:hover span {
  top: 0;
}
 .brick:focus #title, .brick:hover #title {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
 .brick:focus #info, .brick:hover #info {
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}

/* -------------------------   */



/* RWD for masonry partner templates */

@media only screen and (min-width: 320px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}

@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}

@media only screen and (min-width: 1280px) {
    .wrapper {
        width: 1260px;
    }
}
<body>

          <div class="wrapper">
            <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1>
                <div class="masonry">
                            <div class="brick">
                                <h2>ADVERTISING</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">  
                                <h2>GRAPHIC DESIGN</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">  
                                <h2>BRAND IDENTITY</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">      
                                <h2>BRAND GUIDELINES</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">
                                <h2>PRINT MANAGEMENT</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">  
                                <h2>CREATIVE DIRECTION</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                   <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>
                            <div class="brick">
                                <h2>EDITORIAL DESIGN</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                            <div class="brick">
                                <h2>AND LOTS OF OTHER STUFF</h2>
                                <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
                                <div class="details">
                                    <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
                                </div>  
                            </div>    
                             
                      
                </div>
         </div>         

</body>

在我的屏幕上看起来像这样（不确定为什么图像形状没有形成在片段中）。然而，我主要担心的是让图像在屏幕上延伸得比现在更进一步 -

Masonry

任何帮助都将不胜感激。

2 个答案:

答案 0 :(得分：0)

解决了它。正是这条规则阻碍了事情 - 

 @media only screen and (min-width: 1600px) {
    .wrapper {
        width: 1560px;
    }
}

我还将此规则的列数从5改为4 - 

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }




}

答案 1 :(得分：0)

我已更新您的代码。做了小小的改动。从砖中移除内联块。并添加了2个以便列可以显示偶数项目。

＆＃13;
＆＃13; 
.brick h2 {
  position: absolute;
  top: 50%;
  left: 45%;
  margin: 0 20px 0 20px;
  color: white;
  text-align: center;
  transform: translate(-50%, -50%);
  font-size: 25px;
}


/* Partners page */

.masonry {
  /* Masonry container */
  column-count: 4;
}

.brick img {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Gotham-Light';
  margin: 0;
  background: #fff;
}

.wrapper {
  width: auto;
  margin: 3em auto;
  background: red;
  /*just for demo*/
}

.masonry {
  margin: 1.5em 0;
  padding: 0;
  -moz-column-gap: 1.5em;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em;
  font-size: .85em;
  vertical-align: bottom;
}

.brick {
  margin: 0 0 1em;
  width: auto;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/* Image words / text hover effect */

.brick {
  opacity: .99;
  position: relative;
}

.brick:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.brick img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.brick .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
}

.brick .details span {
  /* display: block; */
  opacity: 0;
  top: 100px;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.brick .details #title {
  line-height: 1.5;
  font-weight: 500;
  font-size: 18px;
}

.brick .details #info {
  line-height: 1.2;
  font-weight: 500;
  font-size: 10px;
}

.brick:focus:before,
.brick:focus span,
.brick:hover:before,
.brick:hover span {
  opacity: 1;
}

.brick:focus:before,
.brick:hover:before {
  top: 50%;
}

.brick:focus span,
.brick:hover span {
  top: 0;
}

.brick:focus #title,
.brick:hover #title {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}

.brick:focus #info,
.brick:hover #info {
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}


/* -------------------------   */


/* RWD for masonry partner templates */

@media only screen and (min-width: 320px) {
  .masonry {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

@media only screen and (min-width: 400px) {
  .masonry {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media only screen and (min-width: 700px) {
  .masonry {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media only screen and (min-width: 900px) {
  .masonry {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media only screen and (min-width: 1100px) {
  .masonry {
    -moz-column-count: 5;
    -webkit-column-count: 5;
    column-count: 5;
  }
}

@media only screen and (min-width: 1280px) {
  .wrapper {
    width: 1260px;
  }
}
＆＃13; 
<body>

  <div class="wrapper">
    <h1><span style="color: rgb(133,52,146);">&#43;</span>What we do</h1>
    <div class="masonry">
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>ADVERTISING</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>GRAPHIC DESIGN</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>BRAND IDENTITY</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>BRAND GUIDELINES</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>PRINT MANAGEMENT</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>CREATIVE DIRECTION</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>EDITORIAL DESIGN</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>
      <div class="brick">
        <h2>AND LOTS OF OTHER STUFF</h2>
        <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1507199659/graphic_design_rbakaf.jpg">
        <div class="details">
          <span id="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</span>
        </div>
      </div>


    </div>
  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题