响应式/流体菱形网格答案

【问题标题】：responsive/fluid diamond grid响应式/流体菱形网格
【发布时间】：2013-10-04 02:56:32
【问题描述】：

如何使用百分比使这种响应或流畅？这样我就不必给它一个固定的像素宽度

HTML

<ul>
  <li><a href='#'><span><img src="http://lorempixel.com/400/400/" alt="" /></span></a></li>
   <li><a href='#'><span><img src="http://lorempixel.com/400/400/" alt="" /></span></a></li>
   <li><a href='#'><span><img src="http://lorempixel.com/400/400/" alt="" /></span></a></li>
   <li><a href='#'><span><img src="http://lorempixel.com/400/400/" alt="" /></span></a></li>
</ul>

CSS

li {
    background: none;
    display: inline-block;
    *display: inline;
    zoom: 1;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 137px;
    height: 137px;
}

a {
    background: #FFFFFF;
    border: 3px solid #cbccce;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    display: block;
    width: 100px;
    height: 100px;
    margin: 25px auto;
    position: relative;
}

li span {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    width: 150px;
    height: 150px;
    margin: -25px;
    display: block;
    position: relative;
}

img {
    max-width: 100%;
    display: block;
    opacity: 0.9;
}

基于： http://viget.com/inspire/who-says-the-web-is-just-for-squares

【问题讨论】：

标签： jquery css media-queries

【解决方案1】：

我实际上为此创建了一个 jQuery 插件。

演示：http://mqchen.github.io/jquery.diamonds.js/
Github：https://github.com/mqchen/jquery.diamonds.js

【讨论】：

【解决方案2】：

您需要更大的图像，但基本上每个宽度都与其父宽度相关。

http://codepen.io/anon/pen/gJeik

ul {
  height:50%;
  width:100%;
}
li {
  padding:0;
  margin:0;
  box-sizing:border-box'
  background: none;     
  float:left;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 25%;
  height: auto;
}
a {
        background: #FFFFFF;
        border: 3px solid #cbccce;
-webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        overflow: hidden;
        display: block;
        width: 100%;;
        height: 100%;
        margin: 25px auto;
        position: relative;
    }
        li span {
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
        transform: rotate(45deg);
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
        }
img {
  width: 100%;
  display: block;
  opacity: 0.9;
}

【讨论】：

谢谢，但是否可以让钻石不重叠？
从技术上讲，它们不会重叠，但由于它们是旋转的，因此您必须做一些额外的工作。