如何使用纯CSS动态缩放每个高度的图像?

时间:2013-08-30 21:54:47

标签: css height fluid-images

这个是专业人士:

我想知道是否可以使用纯CSS实现像this site上的图像缩放行为?

请注意,如果浏览器窗口的高度发生变化,图像只会开始缩放,而不是宽度。 (只是说因为我发现网上的所有信息都与宽度的改变有关。)

真正的粘滞点似乎是不同的阈值:如果景观形状的图像与已经缩小尺寸的肖像形状图像具有相同的高度,它们就会开始按比例缩小。

对此事的任何反馈都非常感谢!

2 个答案:

答案 0 :(得分:1)

您可以将max-heightmin-heightwhite-space%高度组合使用。唯一不好的是每个图像必须设置一个类来确定它是垂直还是水平。

http://jsfiddle.net/Rgp6h/

示例HTML:

<div>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/500/200" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/400/300" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
</div>

CSS:

body,html{
    height: 100%;
}

div{
 white-space: nowrap;
    height: 100%;
}

img{
    min-height: 200px;
    height: 100%;
    vertical-align: top;
}

.horiz{
    max-height: 300px;
}

.vert{
    max-height: 500px;
}

答案 1 :(得分:0)

我认为他们只是使用JavaScript来做到这一点,但您可以根据需要使用基于百分比的尺寸或媒体查询。

.coolImg {
    height: 50%;
}
@media all and (max-height: 600px) {
    .coolImg {
        height: 50%;
    }
}

如果您分享了一些关于如何尝试这样做的代码,我们可以尝试更具体地解决您的解决方案。