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

Question

简短版本:从这个小提琴开始,使图像很好地适合小窗口的可见区域

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

更长的版本:

我正在研究一个轻量级流体灯箱,并且有一个我无法解决的明显简单的CSS问题.

我希望在需要适合时缩小内容(单个图像),同时保持纵横比相同.

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

它几乎可以工作,但图像的高度略高于实际可见的高度,因此底部的一些部分会被剪裁.我试过调整东西无济于事; 我希望我明白为什么可用的高度太高了.

也许它是相关的,但是IE 9甚至没有通过这种解决方案的尝试来维持宽高比.此外,Chrome在调整窗口大小并run在小提琴中点击有时会以不同的方式重绘.

解决方案是什么？

如果必要的话,将<img>一个<div>或两个包装起来是没有问题的,但顶层结构理想情况下应该保持相同(即a .featherlight-content内部.featherlight和那个).

Answer 1

注意：以下内容似乎仅适用于 Chrome，但在 Firefox 或 IE 中不起作用...

经过一番思考后，我的结论是，一般处理高度和宽度的方式存在根本差异，并且它会影响这里的计算。

肯定和事物的流动有关，比如减小a的宽度，<div>内容会向下流动，扩大高度，但是减小a的高度，如何<div>不会使其变宽。

这里的裁剪是因为可用高度中没有考虑border-bottom和。padding-top因此，解决方案是完全删除它们。

如果仍然想要一个边框，那么可以通过添加一个绝对定位来伪造它<div>。这是相应的小提琴。