Css ZURB基础块网格具有不同的图像尺寸？

这是我在块网格示例中的代码

链接：

我试图处理的问题是图像大小不同。我的后端将强制使用

minwidth=x

和

minheight=y

但如何处理布局，以便：

如果宽度<高度：修剪高度并使其居中

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

但所有图像必须具有相同的

li

大小。还有，当窗口大小改变时，如何处理，这会不会使作物变得凌乱

我的一个选择是避免完全使用

块网格

，而只使用

li的固定大小。那也可以。所以基本上，
li
会根据屏幕大小改变wxh

但我更喜欢玩这个把戏，如果它起作用的话

请帮忙。谢谢
 您可以使用以下命令将每个图像插入到div中：

overflow:hidden;

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

$（“img”）。每个（函数（）{
var width=$（this.width（）；
var height=$（this.height（）；
if（高度<宽度）{
$（this）.height（$（“#div”）.height（））；//如果宽度>高度，请将图像高度设置为等于div高度。。
//让我们假设此图像已放入id为“div”的div中
}
否则{
$（this.width（$（“#div”）.width（））；
}
});
通过将图像设置为
背景图像
，您可以更好地控制
元素中图像的裁剪和定位

这样做的一个缺点是需要固定
元素的高度。尽管一些简单的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>

编辑

添加了一些jQuery以根据宽度调整
的高度

$(document).ready(function(){

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

    reheight();

    $(window).resize(function(){
        reheight();
    });

});

还有一个问题。
我不知道javascript可以这么快…：）
<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>

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

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

$(document).ready(function(){

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

    reheight();

    $(window).resize(function(){
        reheight();
    });

});