如有必要，调整图像大小以适合固定高度的容器

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

设置max-height CSS属性有什么问题？

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

然后添加CSS表达式以解决方法IE6

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