这是我在 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
并只使用 fixed size 的 li
。那也行。所以基本上 li
会根据屏幕尺寸改变 wxh。
但如果可行,我更愿意玩这个把戏。
请帮忙。谢谢!
最佳答案
通过将图像设置为 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 .
关于css - 具有不同图像大小的 Zurb Foundation Block Grid?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17671773/