响应式图像网格。填写包装上的空白

当电网调整大小（在浏览器调整大小），或者当在网格图像的一定数量的，它留下空的间隙。我想知道是否有什么我可以做的，也许使用jQuery，用我选择的图像填补空白。看到下面的图片，我的意思是，它显示了一个通过它的对角线的持有人图像。这完全是出于美学原因。

http://cl.ly/Dql6

下面是从的jsfiddle代码;

<!doctype html> 
<head> 

<style type="text/css"> 
ul { margin: 0; padding: 0; } 
figure { margin: 0; padding: 0; } 
#page { 
    margin: 0 auto; 
    max-width: 1000px; 
} 
.item { 
    display:block; 
    position:relative; 
    float:left; 
    overflow:hidden; 
    width: 20%; 
} 
img { 
    max-width:100% !important; 
    height:auto  !important; 
    width: auto; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
    vertical-align: middle; 
} 
.name a { 
    display:inline; 
    text-decoration: underline; 
    position:relative; 
} 
@media (max-width: 800px) { .item { width: 25%; } } 
@media (max-width: 600px) { .item { width: 33.33%; } } 
@media (max-width: 400px) { .item { width: 50%; } } 
</style> 

</head> 

<body> 
<div id="page"> 
    <div id="gallery"> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
    </div> 
</div> 
</body> 
</html>

来源

2012-02-01 robflate

根据我的理解，您希望获得图库中空白区域的数量，以便您可以在该空白处放置其他东西。

这是一个非常粗略的例子，但我想确保这是您想要实现的目标，从这一点来看，如果您有任何问题，我们可以随时改进它。

它的工作方式是每次点击它时都会显示图库中剩余空白空白的数量。

请看看例子：http://jsfiddle.net/jYGPV/1/

来源

2012-08-23 17:05:36 xapu

响应式图像网格。填写包装上的空白

回答

相关问题