css - 如何在css中有流体高度？

Question

我正在尝试对某些项目进行向下滑动效果，悬停时图像会向下滑动并显示内容，问题是当您调整浏览器大小时，图像也会调整大小，因为我有

img { max-width: 100%; }

但问题是我也不能有流体高度，我不能在它们上使用百分比高度。这就是正在发生的事情：

我将背景设置为黑色以查看发生了什么，我目前的高度为 210 像素。

那么如何解决这个问题呢？

score 1 · Accepted Answer

我在工作中遇到过类似的问题。不幸的是，只有 CSS 没有干净的解决方案。您可以使用一些在onresize事件期间触发的 javascript，或者您可以添加一个看不见的占位符图像，并将div' 的大小调整保持在正确的比例。

我所做的是将.desc定位绝对高于气球图像的副本，该图像“保持形状” div。您可以在我的 codepen中使用透明.png或仅将图像设置为喜欢。请参阅我的示例，包括可滚动opacity:0.0;的中间部分。<li>

注意：要跨浏览器工作，这需要更多测试并可能使用 IEfilter来使图像透明。

score 0 · Accepted Answer

添加min-width:300px;（300px 可以切换为任何你想要的大小），到 img {}。所以你会有img { max-width: 100%; min-width:300px;}. 这应该可以防止文本在图像下方用完。

2 回答 2