Question

这是Block Grid示例中的代码 http://foundation.zurb.com/docs/components/block-grid.html

<ul class="small-block-grid-2 my-grid">
  <li><img src="http://static4.businessinsider.com/image/50098bda69beddb65e000008-480/iphone-example-camera-photo.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo2.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo3.jpg"></li>
  <li><img src="http://foundation.zurb.com/docs/img/demos/demo4.jpg"></li>
</ul>

链接：http://jsfiddle.net/qhoc/ckMEN/1/

我尝试处理的问题是图像大小不同。我的后端将强制执行min width = x和min height = y，但如何处理布局以便：

如果宽度<高度：裁剪并居中高度
如果宽度>高度：裁剪并居中宽度

但是，所有图片的大小必须相同li。当窗口大小发生变化时，如何处理会使作物混乱吗？

我有一个替代方法是避免完全使用block-grid并且只有li的固定大小。那也没关系。所以li基本上会根据屏幕尺寸更改wxh。

但如果有效，我更喜欢玩这个技巧。

请帮忙。谢谢！

Answer 1

通过将图像设置为background-images，您可以更好地控制<li>元素中图像的裁剪和定位。

这样做的一个缺点是你需要修复<li>元素的高度。虽然一些简单的JavaScript或媒体查询可以纠正这一点。

<强> HTML

<div class="row">
  <div class="small-12 small-centered columns">
    <ul class="small-block-grid-4 large-block-grid-4 my-grid">
      <li>
          <div style="background-image:url(http://static4.businessinsider.com/image/50098bda69beddb65e000008-480/iphone-example-camera-photo.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo2.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo3.jpg);"></div>
      </li>
      <li>
          <div style="background-image:url(http://foundation.zurb.com/docs/img/demos/demo4.jpg);"></div>
      </li>
    </ul>
  </div>
</div>

<强> CSS

.my-grid li {
    display:block;
    height:150px;
    overflow:hidden;
}

.my-grid li > div {
    height:100%;
    width:100%;
    background-size:cover;
    background-position:center center;
}

修改

添加了一些jQuery来根据宽度调整<li>的高度。

$(document).ready(function(){ function reheight() { $('.my-grid > li').each(function() { $(this).height($(this).width() * 0.75); }); } reheight(); $(window).resize(function(){ reheight(); }); });

这是一个full example。

Answer 2

您可以将每张图片插入到div中：

overflow:hidden;

并将图像放在div的中心，然后：

$("img").each(function(){

    var width = $(this).width();
    var height = $(this).height();

    if(height < width){

        $(this).height($("#div").height()); //if the width > height, set the image height equal to the div height.. 
            //let's assume that this image is into the div with id="div"
    }
    else{
        $(this).width($("#div").width());
    }

});

Zurb Foundation Block Grid具有不同的图像尺寸？

2 个答案: