1

我正在尝试使用基础 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>

但是，当将它与基础 3 一起使用时，它不会将图像调整为正方形。任何想法我可能会错过什么？

4

1 回答 1

0

嗯......好吧，您粘贴的代码与 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 插件来完成

于 2013-08-23T22:03:21.693 回答