必要时调整图像大小，以适应固定高度容器

Question

对于CSS和/或JavaScript/jQuery，我们是否可以调整图像的大小，只有当图像需要其馀内容才能适应固定高度的容器时呢？如果你回顾本周新的图片和下面截图中的每周特辑部分，你就会明白我的意思。然而，有些情况下，一切都适合，因为图像足够小，它们下面的文本数量也不是很大。

​

​

Answer 1

使用jQuery：

$(document).ready(function() { $('div.item img').each(function() {
    var image = $(this);
    var div = $('div.item p');
    if ((image.height() + div.height()) >> $('div.item').height()) {
        while ((image.height() + div.height()) >> $('div.item').height()) {
            image.height(image.height() - 1);
        }
    }
});});

Answer 2

不，不是像你描述的那样只使用CSS。但是，是的，有了jQuery，您就可以完成这一任务。

我个人对jQuery不够有效，无法尝试给出一个编码的解决方案，但从概念上讲，您可以执行一些操作，比如检查子元素的计算高度，然后将其与父容器的高度相匹配。然后，如果子元素大于固定元素的高度，则计算差异，并将该新值作为内联高度属性或内联样式属性添加到图像中。

Answer 3

设置最大高度CSS属性有什么问题？

<img src="big.jpg" style="max-height:300px">

然后向IE6中添加CSS表达式。

<img src="big.jpg" style="max-height:300px; _height:expression(Math.min(this.offsetHeight, 300))">