Question

我有一个jasfiddle：http://jsfiddle.net/g79a2jw7/11/

设定：

非常基本的图库设置，对此基本功能感到满意
使用内联块网格，如纯网格，因为网站使用的是
图库图像作为内嵌背景样式插入，然后隐藏图像

这允许在响应式布局中进行css图像大小/裁剪控制，如下所示：

.gallery-item {
  background-position: 50% 50%;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我试图解决的问题：

需要.gallery＆amp;的高度。 .gallery-item div来确认父.hero div的高度，因此图库高度始终与右边的英雄文本相匹配。一旦高度分类，css background-size: cover;属性应该处理居中的图像裁剪
然后需要使用上一个/下一个按钮来计算基于画廊高度的垂直居中
需要图库在移动设备上正常流动，以便推送它下面的文字
如果它允许所有居中的图像裁剪等，那么很高兴采用完全不同的方法
需要IE 9+支持

Answer 1

使用jQuery很容易：如果.hero div是直接父级，则可以使用parent（） - 否则，可以使用带有选择器的parents（）

$('.gallery, .gallery-item').each(function(){
    var parent_height = $(this).parents('.hero').height();
    $(this).height(parent_height);
});

强制响应图库是其父母的高度

1 个答案: