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

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

img{最大宽度：100%；}

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

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

---

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

添加

最小宽度：300px（300px可以根据您想要的大小进行切换）到img{}。所以你会有
img{最大宽度：100%；最小宽度：300px；}
。这样可以防止图像下的文本溢出

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

我所做的是将
.desc
绝对放置在气球图像的副本上方，气球图像“保持
div
的形状”。您可以使用透明的
.png
或将图像设置为
不透明度：0.0就像我的代码笔一样。请参阅我的示例，其中包括可滚动的中间


注意：要跨浏览器工作，这需要更多的测试，可能需要使用IE的
过滤器
，以使图像透明。
是的，我知道，但我希望图像能够调整大小，并且li上的高度210px仅用于演示。