Question

我想用css创建一个网格布局来显示不同高度的图像，就像马赛克一样。我使用以下代码来表示html

<div id="photos">
        <a href="../media/images/0.jpg"><img src="../media/images/0.jpg" alt="Little doggie"></a>
        <img src="../media/images/1.jpg" alt="Little kittie">
        <img src="../media/images/2.jpg" alt="Little kittie">
        <img src="../media/images/3.jpg" alt="Little doggie">
        <img src="../media/images/4.jpg" alt="Little kittie">
        <img src="../media/images/5.jpg" alt="Little kittie">
        <img src="../media/images/6.jpg" alt="Little doggie">
        <img src="../media/images/7.jpg" alt="Little kittie">
        <img src="../media/images/8.jpg" alt="Little kittie">
        <img src="../media/images/9.jpg" alt="Little doggie">
        <img src="../media/images/10.jpg" alt="Little kittie">
        <img src="../media/images/11.jpg" alt="Little kittie">
        <img src="../media/images/12.jpg" alt="Little doggie">
        <img src="../media/images/13.jpg" alt="Little kittie">
        <img src="../media/images/14.jpg" alt="Little kittie">
        <img src="../media/images/15.jpg" alt="Little doggie">
        <img src="../media/images/16.jpg" alt="Little kittie">
        <img src="../media/images/17.jpg" alt="Little kittie">
        <img src="../media/images/18.jpg" alt="Little doggie">
        <img src="../media/images/19.jpg" alt="Little kittie">
        <img src="../media/images/20.jpg" alt="Little kittie">
        <img src="../media/images/21.jpg" alt="Little doggie">
        <img src="../media/images/22.jpg" alt="Little kittie">
        <img src="../media/images/23.jpg" alt="Little kittie">
        <img src="../media/images/24.jpg" alt="Little doggie">
        <img src="../media/images/25.jpg" alt="Little kittie">
        <img src="../media/images/26.jpg" alt="Little kittie">
        <img src="../media/images/27.jpg" alt="Little doggie">
        <img src="../media/images/28.jpg" alt="Little kittie">
        <img src="../media/images/29.jpg" alt="Little kittie">
        <img src="../media/images/30.jpg" alt="Little doggie">
        <img src="../media/images/31.jpg" alt="Little kittie">
        <img src="../media/images/32.jpg" alt="Little kittie">
        <img src="../media/images/33.jpg" alt="Little doggie">
        <img src="../media/images/34.jpg" alt="Little kittie">
        <img src="../media/images/35.jpg" alt="Little kittie">
        <img src="../media/images/36.jpg" alt="Little doggie">
        <img src="../media/images/37.jpg" alt="Little kittie">
        <img src="../media/images/38.jpg" alt="Little kittie">
        <img src="../media/images/39.jpg" alt="Little doggie">
        <img src="../media/images/40.jpg" alt="Little kittie">
        <img src="../media/images/41.jpg" alt="Little kittie">
        <img src="../media/images/42.jpg" alt="Little doggie">
        <img src="../media/images/43.jpg" alt="Little kittie">
        <img src="../media/images/44.jpg" alt="Little kittie">
        <img src="../media/images/45.jpg" alt="Little doggie">                        

    </div>

和CSS

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   5px;
   -moz-column-count:    5;
   -moz-column-gap:      5px;
   column-count:         5;
   column-gap:           5px;


}
#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 100% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;

}

#photos img:hover{
    transform:scale(1.5);
}

@media (max-width: 1200px) {
  #photos {
      -moz-column-count:    4;
      -webkit-column-count: 4;
      column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
      -moz-column-count:    3;
      -webkit-column-count: 3;
      column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
      -moz-column-count:    2;
      -webkit-column-count: 2;
      column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
      -moz-column-count:    1;
      -webkit-column-count: 1;
      column-count:         1;
  }
}

但是当我在mozilla上运行时，它将无法工作，并且当图像缩放某些时候它会消失，而空白区域会变白。有什么不对？这是jsfiddle

Answer 1

检查： -

#photos img {
  /* Just in case there are inline attributes */
  margin-top:4px;
  width: 20% !important;
  height: auto !important;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  float:left

}

<强> DEMO

Css网格图像

1 个答案: