在不知道背景高度的情况下设置带背景的 div 高度答案

【问题标题】：Set div height with background without knowing background height在不知道背景高度的情况下设置带背景的 div 高度
【发布时间】：2015-12-26 00:53:36
【问题描述】：

我有很多相同的 div。每个人都有自己的背景。

<div class="grid-item"><div class="grid-con" style="background:url(http://image-goes-here.com/img.jpg);"></div></div>
// etc...

我正在使用 jQuery 将属性设置为背景：

$(".grid-con").css({"background-size": "100% auto", "background-repeat": "no-repeat", "background-position": "50% 50%"});

还有用于额外属性的 css：

.masonry { float:left; width:950px; margin-top:20px; }
.grid { width:100%;  }
.grid-item { width:217px; margin:0 20px 20px 0; }
.grid-con { width:100%; height:auto; }

如果我将固定高度设置为.grid-con，一切正常。

问题：

如何让它在没有固定高度的情况下工作？ width:100% 工作完美，但 height:auto 没有。我需要显示所有需要以未知高度适应固定宽度的背景。

【问题讨论】：

为什么要使用jQuery来设置背景属性？为什么不直接在 CSS 中做呢？
当您说height: auto 不起作用时，您是什么意思？发生了什么，你期望会发生什么？请阅读minimal reproducible example。
因为如果我将 jquery css 属性设置为 css 文件，则它不起作用。如果我直接设置为代码，那么它的工作方式与 jquery 方法相同。例如，我有一个图像，它需要以未知高度适应固定宽度，但我需要显示自动计算的高度。
另外，我需要使用后台方法，而不是<img.. /> 方法。

标签： jquery html css height masonry

【解决方案1】：

我不确定this demo 的结果是否符合您的预期，但代码如下：

$('.grid-con[style*=url]').each(function(){
  var $this = $(this),
    img = new Image(),
    src = $this.attr('style').match(/url\(([^)]+)/);
  if ( src && src.length >= 1 ) {
    img.src = src[1];
    $this.height(img.height);
  }
});

如果您不支持 IE8 或更早版本 (ref)，也可以使用图像的 naturalHeight。

【讨论】：