如何使用纯CSS动态缩放每个高度的图像？ [英] How to dynamically scale images per height using pure CSS?

问题描述

这一个出去的CSS专家：

This one goes out to the CSS pros:

我想知道是否可以实现图像缩放行为像使用纯CSS的此网站？

I wonder if it's possible to achieve a image scaling behavior like on this site using pure CSS?

请注意，只有浏览器的高度窗口的变化，而不是它的宽度。 （只是说，因为我发现的所有信息，我发现是关于宽度的改变。）

Be aware that the images only start scaling if the height of the browser window changes, not its width. (Just saying because all info on the web I found is about the alteration of the width.)

真正的粘点似乎是不同的阈值：

The real sticking point seems to be the different threshold values: Landscape-shaped images just start scaling down if they have the same height as the already downscaled portrait-shaped images.

任何有关此事的反馈都非常感谢！

Any feedback on that matter is highly appreciated!

推荐答案

您可以使用 max-height ， min-height ，白色空间和％唯一的否定是每个图像必须有一个类设置，以确定它是垂直还是水平。

You can do it with a combination of max-height, min-height, white-space and % height. The only negative is that each image has to have a class set to determine if it is vertical or horizontal.

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;
}

这篇关于如何使用纯CSS动态缩放每个高度的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！