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

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))">