Question

我有一个div网格，需要更改高度以匹配div的宽度。我已经习惯了媒体查询和jquery来实现这一点但是在jquery运行后并不是所有的div都是相同的高度。在jquery中有什么我错过的吗？

JQuery的

var setFeedItem = function () {
  console.log($(this).css('width'));
  $(this).css('height', $(this).width());
};

$('#feed .feed_item').each(setFeedItem);
$(window).resize(function () {
  $('#feed .feed_item').each(setFeedItem);
});

CSS：

.feed_item {
  overflow: hidden;
  margin: 0;
  padding: 0 !important;
  position: relative;
  float: left;
  height: 100px;
}
.feed_item img {
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 2500px) {
  .feed_item {
    width: 10%;
  }
}
@media screen and (max-width: 2000px) {
  .feed_item {
    width: 12.5%;
  }
}
@media screen and (max-width: 1500px) {
  .feed_item {
    width: 20%;
  }
}
@media screen and (max-width: 1200px) {
  .feed_item {
    width: 25%;
  }
}
@media screen and (max-width: 900px) {
  .feed_item {
    width: 33.33333333%;
  }
}
@media screen and (max-width: 700px) {
  .feed_item {
    width: 50%;
  }
}
@media screen and (max-width: 480px) {
  .feed_item {
    width: 100%;
  }
}
@media screen and (max-width: 320px) {
  .feed_item {
    width: 100%;
  }
}

HTML：

<div id="feed">
  <div class="feed_item"><img src="images/rand1.jpg" /></div>
  <div class="feed_item"><img src="images/rand3.jpg" /></div>
  <div class="feed_item"><img src="images/rand2.jpg" /></div>
  <div class="feed_item"><img src="images/rand1.jpg" /></div>
  <div class="feed_item"><img src="images/rand4.jpg" /></div>
  <div class="feed_item"><img src="images/rand2.jpg" /></div>
  <div class="feed_item"><img src="images/rand1.jpg" /></div>
  <div class="feed_item"><img src="images/rand4.jpg" /></div>
  <div class="feed_item"><img src="images/rand3.jpg" /></div>
</div>
<div style="clear:both"></div>

可能是媒体查询干扰了jQuery，但任何帮助都会很棒，因为这会破坏我的布局。

Answer 1

如果我理解正确，你想要方形响应块吗？在这种情况下，您不需要jQuery。您可以在元素上使用填充底部，以使它们具有“响应”高度。

.feed_item{
  width:20%;
  background:red;
  padding-bottom:20%;
}

如果您希望这些块中的图片缩放到.feed_item的大小，则可以将position:relative添加到.feed_item并将img置于绝对位置。看看这支笔：

http://codepen.io/SamP/pen/GqrypX

使用百分比和媒体查询宽度时，设置div高度以匹配div宽度

1 个答案: