Question

我怎样才能使用百分比使这个响应或流畅？所以我不必给它一个固定的像素宽度

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

Answer 1

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

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

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

响应/流体金刚石网格

2 个答案: