基于图像的 CSS 最小高度答案

【问题标题】：CSS min-height based on image基于图像的 CSS 最小高度
【发布时间】：2014-06-17 02:46:07
【问题描述】：

所以，目前我正在尝试根据图片的高度而不是文本的高度来设置一些 css 表格内容的最小高度。

本质上，我的布局是这样的：

<Image @60% width> | <Text @40% width>

我目前正在使用弹性框来执行此操作。

但是，现在，当页面调整大小时（我不能使用静态高度，因为它需要完全响应），在某个点上，图像变得非常小，而文本使容器变得很大。

理想情况下，我希望文本始终与图像高度相同，并且如果出现溢出，则使其基于滚动。

这是我当前的 Jsfiddle。

http://jsfiddle.net/D7h3z/4/

我并不反对使用新的/实验性的技术。我反对为此使用 JavaScript，因为没有必要。如果我确实需要，我不使用 JQuery，所以如果可以的话，请避免在你的答案中使用它。

【问题讨论】：

图片的尺寸在所有情况下都是固定的吗？
@ZachSaucier 在这种情况下他们是。虽然如果可能的话，我想让它们自动以 100% 的宽度缩放。
不使用 flex 你可以做到this way。不知道如何以其他方式做到这一点......
为什么还需要 flex 呢？
@ZachSaucier 实际上我没有。我只是在做实验。你的回答虽然有效！非常感谢！

标签： html css flexbox

【解决方案1】：

3查看我对您的小提琴所做的更改 -- New Fiddle

基本上，我将描述的内部跨度设置为绝对定位，然后在其容器跨度上放置一个溢出-y 自动。我对 img 容器应用了 200px 的最小高度，它似乎按照您的描述工作。如果不是这样，请告诉我。

.description {
    width: 40%;
    padding: 10px;
    position: relative;
    overflow-y:scroll;
}

.imagebox {
    width: 60%;
    min-width: 300px;
}

.imagebox img {
    width: 100%;
    min-height:200px
}

.description span {
    padding: 10px;
    position: absolute;
}

编辑实际上还没有 100% 工作，图像没有保持纵横比……悲伤的长号

EDIT 2 添加了一个 min-width ，但从动态的角度来看，这远非理想。今晚晚些时候我会再看一遍。

【讨论】：