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

Question

这个是针对 CSS 专业人士的：

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

请注意，图像仅在浏览器窗口的高度而不是宽度发生变化时才开始缩放。（只是说因为我在网上找到的所有信息都是关于宽度的改变。）

真正的症结似乎是不同的阈值：如果横向图像与已经缩小的纵向图像具有相同的高度，它们就会开始缩小。

非常感谢您对此事的任何反馈！

Answer 1

您可以使用 、 和 height 的max-height组合min-height来完成white-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;
}

Answer 2

我认为他们只是使用 JavaScript 来做到这一点，但你可以只使用基于百分比的大小，或者在必要时使用媒体查询。

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

如果您分享一些有关您尝试执行此操作的代码，我们可以尝试更具体地解决您的解决方案。