Question

简短版：从this fiddle

开始，使图像非常适合小窗口的可见区域

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

更长的版本：

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

我希望在需要适合时缩小内容（单个图像），同时保持纵横比相同。

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

几乎可以工作，但图像is slightly more的高度比实际可见的高，所以底部的一些部分会被剪裁。我试过调整东西无济于事;我希望我明白为什么可用的高度太高了。

也许它是相关的，但IE 9甚至没有通过这种解决方案的尝试来维护aspect ratio。此外，在调整窗口大小并点击小提琴中的run时，Chrome会出现奇怪的行为，有时会重绘不同。

解决方案是什么？

如果有必要，将<img>包装在<div>或两个中是没有问题的，但顶层结构理想情况下应该保持不变（即.featherlight-content位于.featherlight内{{1}} 1}}就是这样。）

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将允许基于浏览器高度的响应。

更高分辨率的浏览器会在900px高度显示图像;那些高度至少为700px的产品将以600px的速度显示，较小的产品将以400px的速度显示。

您当然可以根据自己的喜好调整数字;但这个解决方案起作用并解决了长图像的问题。

Here's a jsfiddle。请注意，使用data-featherlight="image"对于此操作非常重要。

希望它有所帮助。

Answer 2

在我看来，最简单的方法是在容器中放置图像并使其居中，这是margin: auto的绝对定位：

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

（Fiddle）

或者，您可以尝试以视口相对单位（vw / vh）设置图片的大小，他们现在拥有相当不错的浏览器支持：http://caniuse.com/#search=vw

Answer 3

注意：以下内容似乎仅适用于Chrome，但它在Firefox或IE中无效...

经过多次讨论后，我得出的结论是，高度和宽度的处理方式存在根本差异，这会影响计算。

它必然与事物的流动有关，例如如何减少<div>的宽度会使内容流下来，扩大高度，但是如何减少{{{1}的高度1}}不会让它更宽。

此处的裁剪是由于<div>和border-bottom未在可用高度中考虑的事实。因此，解决方案是完全删除它们。

如果仍然需要边框，则可以通过添加绝对定位的padding-top来伪造它。 Here's the corresponding fiddle.

Answer 4

您可以尝试以下方法。具有集width的元素在具有padding和/或border-width时会变得更宽。要避免这些问题，请使用现在常用的box-sizing: border-box; reset。

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

通过将height: 100%;设置为父项内的“ghost”元素（可以是伪元素）并将vertical-align: middle;设置为两者，可以使元素居中。

.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%;和height: auto;应用于图片，可以使图像响应友好，以便它可以很好地扩展到父元素。

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

在此处查看实时示例：http://jsfiddle.net/cdog/AXzz8/。

Answer 5

由于padding将其抛弃而被切断。
它在IE或Firefox中不起作用，因为他们不认为height内容div应该伸展以适应其容器的height。您必须使用height: 100%或其他一些百分比。这在尝试实现max-height时会导致更多问题。
当height中的大小变大时，它不会放大图像，因为这是大多数浏览器在视口大小时处理重新呈现页面（或在这种情况下不重新渲染）的方式height中的更改。您必须强制重新呈现页面。我知道如何做的唯一CSS方式是使用CSS3动画。

这是一个在Firefox或IE中无效的解决方案（因此......不是很好的解决方案），但它解决了切断和调整大小问题。

http://jsfiddle.net/SombreErmine/ENrnu/5/

它利用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>

CSS代码：

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

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

5 个答案: