css - 如何使用带有 CSS 的基础框架创建方形图像缩略图

Question

我正在尝试使用基础 3.2.5 实现此目的: http://foundation.zurb.com/old-docs/f3/clearing.php

我希望缩略图显示为大小相同的正方形。这是我从他们的网站上获取的代码，他们正在使用:

              <div class="row">
            <div class="four columns">
              <ul class="block-grid three-up mobile-two-up" data-clearing>
                <li><a href="http://placekitten.com/g/1000/1000"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/1000"></a></li>
                <li><img src="http://placekitten.com/g/1000/900"></li>
                <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Integer posuere erat a ante venenatis dapibus posuere velit aliquet." src="http://placekitten.com/g/1000/800"></a></li>
                <li><img data-caption="Pellentesque ornare sem lacinia quam venenatis vestibulum." src="http://placekitten.com/g/1000/700"></li>
                <li><a href="http://placekitten.com/g/1000/600"><img data-caption="Etiam porta sem malesuada magna mollis euismod." src="http://placekitten.com/g/1000/600"></a></li>
                <li><img data-caption="Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit." src="http://placekitten.com/g/1000/500"></li>
              </ul>
            </div>

然而，当它与 foundation 3 一起使用时，它不会将图像调整为正方形。有什么想法我可能会遗漏吗？

Answer 1

嗯...好吧，您粘贴的代码与 zurb.com 中的代码不同，实际上原始代码对所有图像使用相同的大小。

<ul class="block-grid three-up" data-clearing>
  <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
  <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
  <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
  <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
  <li><a href="http://placekitten.com/g/1000/800"><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/100/100"></a></li>
  <li><img data-caption="Maecenas sed diam eget risus varius blandit sit amet non magna." src="http://placekitten.com/g/1000/800"></li>
</ul>

现在，您要实现的目标可以使用像 https://code.google.com/p/resize-crop/ 这样的 Jquery 插件来完成。