我正在尝试对某些项目进行向下滑动效果，悬停时图像会向下滑动并显示内容，问题是当您调整浏览器大小时，图像也会调整大小，因为我有
img { max-width: 100%; }
但问题是我也不能有流体高度，我不能在它们上使用百分比高度。这就是正在发生的事情：
http://codepen.io/joe/pen/yLjEx
我将背景设置为黑色以查看发生了什么，我目前的高度为 210 像素。
那么如何解决这个问题呢？
问问题
3346 次
2 回答
1
我在工作中遇到过类似的问题。不幸的是，只有 CSS 没有干净的解决方案。您可以使用一些在onresize事件期间触发的 javascript，或者您可以添加一个看不见的占位符图像，并将div' 的大小调整保持在正确的比例。
我所做的是将.desc定位绝对高于气球图像的副本，该图像“保持形状” div。您可以在我的 codepen中使用透明.png或仅将图像设置为喜欢。请参阅我的示例，包括可滚动opacity:0.0;的中间部分。<li>
注意：要跨浏览器工作，这需要更多测试并可能使用 IEfilter来使图像透明。
于 2012-12-14T21:30:25.010 回答
0
添加min-width:300px;（300px 可以切换为任何你想要的大小），到 img {}。所以你会有img { max-width: 100%; min-width:300px;}. 这应该可以防止文本在图像下方用完。
于 2012-12-13T21:58:24.987 回答