如何将 DIV 宽度手风琴设置为图像大小答案

【问题标题】：How to set a DIV width accordion to image size如何将 DIV 宽度手风琴设置为图像大小
【发布时间】：2014-06-17 03:41:20
【问题描述】：

我需要根据我将用作背景的图像的宽度设置一个 DIV 宽度（高度是固定的）。显然图像比DIV大。

让我试着解释一下：

HTML

<DIV class="book"></DIV>

CSS

.book {
  height:180px;
  background: url("hh1.jpg");
  width: ???
}

现在背景图片“hh1.jpg”肯定比DIV大。我可以使用“cover”属性，但我想动态（通过 php）设置 DIV 的宽度，以便它始终显示整个背景图像。

假设我有一个 180 像素的固定高度并使用 1000(w)x1800(h) 的图像，生成的 div 应该是 100(w)x180(h)px。如果我使用 1200(w)x3600(h)px 的 div 应该是 60(w)x180(h)px 等等。

【问题讨论】：

【解决方案1】：

您可以选择总是足够的最小宽度。在相对定位的容器中使用绝对位置，这样元素就不会干扰文档的流动。

<div class="cont"><div class="bg"></div></div>
.cont{position:relative;}.bg(position:absolute; background: ....)

【讨论】：