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

短版：从

更新：似乎没有解决此问题的方法。我认为可能有一个原因，因为Chrome实际上使之成为可能（见我的答案），但在其他浏览器中行为是不同的

较长版本：

我正在处理一个很简单的CSS问题，我无法解决

如果需要的话，我希望内容（单个图像）缩小，同时保持纵横比不变

这里有一个小提琴演示：。调整窗口大小，使图像不适合高度

它几乎可以工作，但是图像的高度比实际可见的要高，所以底部有一点被剪掉了。我尝试过调整，但没有效果；我希望我能理解为什么可用高度太高

也许这是相关的，但IE 9甚至不能与这个解决方案的尝试保持一致。此外，当调整窗口大小时，Chrome的行为会很奇怪，单击小提琴中的

run

有时会以不同的方式重新绘制

解决办法是什么

---

如果必要的话，将

包装成一两个

是没有问题的，但是顶层结构在理想情况下应该保持不变（即

.featherlight内容
在
.featherlight
中，就是这样）。
注意：以下内容似乎仅适用于Chrome，但它在Firefox或IE中不起作用

经过反复研究，我的结论是，高度和宽度的处理方式有着根本的不同，这会影响到这里的计算

它必然与事物的流动有关，比如缩小
的宽度会使内容向下流动，扩大高度，但缩小
的高度不会使其变宽

此处的剪裁是由于在可用高度中未考虑到
边框底部
和
填充顶部
。因此，解决办法是将这些问题全部删除

如果仍然需要边框，则可以通过添加绝对定位的
来伪造
 您可以尝试以下方法。具有设置的
宽度
的元素在具有
填充
和/或
边框宽度
时变宽。要避免这些问题，请使用现在常见的
框大小：边框框

一个元素可以通过设置
高度：100%居中
到父元素内部的“ghost”元素（可以是伪元素）和
垂直对齐：中间到两者

.featherlight {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    font-size: 0;
    left: 0;
    overflow: auto;
    padding: 0 5%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

.featherlight:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
}

.featherlight-content {
    display: inline-block;
    margin: 5% 0;
    max-width: 100%;
    vertical-align: middle;
}

应用
max width:100%可使图像响应友好和<代码>高度：自动以使其与父元素很好地缩放

.featherlight-content img {
    border: 25px solid #fff;
    display: block;
    height: auto;
    max-width: 100%;
}

请参见此处的实时示例：。
在我看来，将图像放入容器中并使其居中的最简单方法是使用
边距进行绝对定位：auto
：

.featherlight img {    
    max-width:90%;
    max-height:90%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
}

（）

或者，您可以尝试以视口相对单位设置图像的大小（
vw
/
vh
），它们现在有很好的浏览器支持：

它被切断，因为
填充
正在将其丢弃
它在IE或Firefox中不起作用，因为它们不认为内容
div
的
height
应该伸展以适应其容器的
height
。您必须使用
高度：100%
或其他百分比。当试图达到
最大高度时，这会导致更多问题

当
height
中的大小变大时，它不会放大图像，因为当视口的大小在
height
中更改时，大多数浏览器都是通过这种方式处理重新渲染页面（或者在本例中不重新渲染）。您必须强制重新呈现页面。我知道的唯一CSS方法是使用CSS3动画

这是一个在Firefox或IE中不起作用的解决方案（所以…不是一个很好的解决方案），但它修复了切断和调整大小的问题


它利用
calc（）
和CSS3动画；所以它在实际应用中肯定是有限的。我不会将此作为解决方案发布。我发布它主要是为了分享我所学到的一些信息。希望这将有助于找到真正的解决方案

HTML代码：

<div class="featherlight" style="display: block;">
    <div class="featherlight-content">
        <img src="http://placekitten.com/640/480" alt="" class="featherlight-image featherlight-inner"/>
    </div>
</div>

.featherlight {
    position:fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
}
.featherlight:before {
    /* position: trick to center content vertically */
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
}

.featherlight .featherlight-content {
    padding: 25px;
    position: relative;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    min-width: 30%;
    margin-left: 5%;
    margin-right: 5%;
    max-height: 95%;
    background: #fff;
}

.featherlight .featherlight-image {
    max-width:100%;
    max-height:calc(100% - 50px);
    vertical-align: bottom;

    -webkit-animation: render_update 1s linear 0s infinite;
       -moz-animation: render_update 1s linear 0s infinite;
         -o-animation: render_update 1s linear 0s infinite;
            animation: render_update 1s linear 0s infinite;
}

@-webkit-keyframes render_update {  from { padding-bottom: 0.001px; } to { padding-bottom: 0px; }  }
   @-moz-keyframes render_update {  from { padding-bottom: 0.001px; } to { padding-bottom: 0px; }  }
     @-o-keyframes render_update {  from { padding-bottom: 0.001px; } to { padding-bottom: 0px; }  }
        @keyframes render_update {  from { padding-bottom: 0.001px; } to { padding-bottom: 0px; }  }

在featherlight.min.css中，将
.featherlight图像{width:100%}
更改为
.featherlight图像{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，图像的高度受到限制@媒体将允许基于浏览器高度的响应

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

当然，您可以根据自己的喜好调整数字；但是这个解决方案有效地解决了长图像的问题

。请注意，使用
data featherlight=“image”
对于此功能的正常工作非常重要

希望有帮助。
您是否注意到Firefox（最新Win版本）根本不显示图像？除此之外，我不认为有一个纯粹的CSS解决方案，因为您必须确定图像的宽度或高度是否根据视口大小设置了最大值。这是CSS无法实现/解决的。因此，您需要Javascript。因此，在写答案之前，请让我们知道，如果您对JS驱动的解决方案感兴趣，请告诉我们-谢谢@Netsurfer：我正在寻找一个CSS解决方案，没有JS.OK，但是，正如前面所写的，您无法实现您的目标。这是不可能的
@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; }
}