流体灯箱容器中图像的CSS调整大小

Question

精简版:使图像很好地适合小窗口的可见区域，从this fiddle开始

更新:这个问题似乎没有解决方案。我认为可能会有一个，因为 Chrome 实际上使它成为可能(请参阅我的回答)，但在其他浏览器中的行为有所不同。

更长的版本:

我正在研究 lightweight fluid lightbox并且有一个看似简单的 CSS 问题我无法解决。

我希望内容(单张图片)在需要时缩小尺寸以适应，同时保持纵横比不变。

这是一个演示 fiddle :http://jsfiddle.net/3a9y9/2/ .调整窗口大小，使图像不适合高度。

它几乎 有效，但是图像的高度 is slightly more比实际可见的要多，所以底部的一部分被剪掉了。我尝试过调整但无济于事；我希望我明白为什么可用高度太高了。

也许是相关的，但 IE 9 甚至不维护 aspect ratio通过这种解决方案的尝试。此外，Chrome 在调整窗口大小时并单击 run 时表现异常在 fiddle 中有时会以不同的方式重绘。

解决方案是什么？

包裹<img>没问题在<div>一两个，如果有必要，但顶层结构最好保持不变(即 .featherlight-content 在 .featherlight 中，仅此而已)。

Answer 1

在 featherlight.min.css 中，将 .featherlight-image{width: 100%} 更改为 .featherlight-image{max-width: 100%}

最后，写下下面的css:

@media only screen and (min-height:1000px) {
    .featherlight-image { height: 900px; }
}
@media only screen and (min-height:700px) {
    .featherlight-image { height: 600px; }
}
@media only screen and (max-height:700px) {
    .featherlight-image { height: 400px; }
}

它所做的是将灯箱的宽度从固定的 100% 更改为最大值 100%(以便根据高度进行调整)。然后使用@media，限制图像的高度。 @media 将允许基于浏览器高度的响应。

较高分辨率的浏览器将以 900 像素的高度显示图像；最小高度为 700px 的将以 600px 显示，较小的将以 400px 显示。

您当然可以根据自己的喜好调整数字；但此解决方案有效并解决了长图像的问题。

Here's a jsfiddle .请注意，使用 data-featherlight="image" 对其正常工作很重要。

希望对您有所帮助。