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

问题描述：

我正在使用CSS砌体排列的一组8个图像的网站的一部分。它看起来如何我想要的宽度的例外 - 我想图像伸出屏幕。我检查了控制台，似乎有一个为.wrapper容器设置的边距，但我似乎无法删除它。我想要的一切都是一样的 - RWD也按我的意愿设置。下面的代码 -CSS - 砌体图像在屏幕上伸展

.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 { 
 
\t width: 100%; 
 
\t 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>

在我的屏幕上它看起来像这样（不知道为什么图像的形状不是在片段形成）。然而，我主要关注的是获取图像，目前还比他们在屏幕上伸展 -

任何援助将不胜感激。

的可能的复制[CSS列错误 - 5列计数仅示出图4（与图像）]（https://stackoverflow.com/questions/9302755/css-columns-bug- 5列只显示4个图像） – sol

答

解决了它。正是这种规则时百般阻挠的事 -

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




}

不，这不是问题:)。检查我的答案 – Aslam

答

我已经更新了你的代码。有轻微的变化。从砖块中移除内联块。并添加了2个，以便列可以显示偶数项目。

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

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

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

相关推荐