使用 div 缩放图像，其子级设置高度答案

【问题标题】：Scaling an image with a div, whose child sets the height使用 div 缩放图像，其子级设置高度
【发布时间】：2011-03-07 20:30:55
【问题描述】：

div 本身就是其内容的高度。

我希望一个 div 包含两个孩子：另一个 div（或左对齐的图像）和一个无序列表 (ul)。内部 div（或图像）将匹配父 div 的高度，父 div 高度将符合列表的高度（可以包含任何合理数量的项目）。

我不确定如何设置父 div 的高度以匹配列表的高度，并使内部 div 与外部 div 的高度匹配。通过 CSS 正确完成。

我们很乐意接受替代解决方案，这只是我尝试实现设计目标的一种方式。

【问题讨论】：

标签： html css semantic-markup

【解决方案1】：

Live Demo

在 IE7/IE8 和最新版本中测试：Firefox、Chrome、Safari、Opera。
图片的高度完全取决于ul的高度。
要为 IE7 提供所需的额外规则 height: 100%，我使用的是 Star hack。如果您需要 100% 有效的 CSS，您可以使用 conditional comments 或 Star plus hack。

CSS：

#iContainer {
    background: #ccc;
    overflow: hidden;
    position: relative
}
#iContainer div {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    *height: 100% /* just for you, IE7 */
}
#iContainer img {
    height: 100%
}
#iContainer ul {
    float: right
}

HTML：

<div id="iContainer">

    <div><img src="https://dummyimage.com/500x700/f0f/fff" /></div>

    <ul>
        <li>list 1</li>
        <li>list 2</li>
        <li>list 3</li>
        <li>list 4</li>
        <li>list 5</li>
        <li>list 6</li>
        <li>list 7</li>
        <li>list 8</li>
    </ul>

</div>

大粉红色图片：

【讨论】：

OP - 选择这个比我的更好
@Sarabjot：如果您遇到任何问题，请告诉我，这不是我以前尝试过的。我很想听听任何警告（当您在真实网站上使用它时）。
非常感谢！我认为这是沿着这些思路，优雅的解决方案。它在数学站点中用于表示线性系统。左图实际上是一个开括号。

【解决方案2】：

这符合你的要求吗？

http://jsfiddle.net/Mutant_Tractor/CQG8s/

它使用一个小的（纯 JS）脚本来测量页面加载时的列表高度，然后通过 .style.height 方法动态设置 div 的高度:)

【讨论】：

太棒了，谢谢！不幸的是，JS 不是一个选项。如果我把它推给老板，他只会告诉我用表格来解决。我试图将我的答案限制在 CSS 和 HTML 上，但我可以看到可能无法做到的地方。
包含div的图片是不重复的，只是缩放到列表的高度。
你不会因此而疯狂像素化吗？
这是一个正在缩小的大图像——它是一个具有定义边缘的单个 ASCII 字符，因此像素化似乎不是什么大问题。问题是它需要匹配列表的高度。
@thirtydot Yayy 表示哀悼：D

【解决方案3】：

如果您希望 div 与其容器的高度匹配，请将其高度设置为 100%。如果您希望 div 尽可能多地使用可用空间，请将其高度设置为 auto（默认）。

所以，听起来您正在寻找的布局是

<style type="text/css">
 .scaledimage{height:100%;float:left}
 .list{float:left;}
</style>
<div class="container">
  <div class="scaledimage"></div>
  <div class="list"></div>
<div>

【讨论】：