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

【问题标题】：CSS resize of image in fluid lightbox container流体灯箱容器中图像的CSS调整大小
【发布时间】：2014-05-20 04:28:15
【问题描述】：

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

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

加长版：

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

如果需要，我希望缩小内容（单个图像）以适应大小，同时保持纵横比不变。

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

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

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

解决办法是什么？

如果有必要，可以将<img> 包装在<div> 或两个<div> 中，但理想情况下，顶层结构应该保持不变（即.featherlight-content 包含在.featherlight 中，仅此而已）。

【问题讨论】：

你有没有注意到Firefox（最新的Win版本）根本不显示图像？除此之外，我认为没有纯 CSS 解决方案，因为您必须确定图像的宽度或高度是否根据视口大小设置最大值。这是你无法用 CSS 实现/解决的。因此，您需要 Javascript。因此，在写答案之前，请告诉我们，如果您也对 JS 驱动的解决方案感兴趣 - 谢谢！
@Netsurfer：我正在寻找 CSS 解决方案，没有 JS。
好的，但是，如前所述，您无法实现目标。仅使用 CSS 是不可能的。
@Netsurfer：看我的回答。

标签： css fluid-layout

【解决方案1】：

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

经过一番折腾，我的结论是，一般处理高度和宽度的方式存在根本差异，它会影响此处的计算。

这必然与事物的流动有关，比如减小<div>的宽度如何使内容向下流动，扩大高度，但如何减小<div>的高度却不行更宽。

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

如果仍然想要一个边框，那么可以通过添加一个绝对定位的<div> 来伪造它。 Here's the corresponding fiddle.

【讨论】：

是的，它在 Firefox 中无法正常工作。所以这对我来说仍然不是“解决方案”。如果将图像用作背景图像并将background-size: contain 设置为background-position: center，则可以轻松实现几乎相同的效果。顺便说一句：为什么不使用 JS 解决方案？它简单且跨浏览器。并将后台方法作为后备......！但这当然取决于你。

【解决方案2】：

您可以尝试以下方法。具有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%; 设置为父元素内的“幽灵”元素（可以是伪元素）并将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/。

【讨论】：

如果不适合高度，您的实时示例甚至不会调整图像的大小根本。因为lorempixel.com 我不知道，所以没有给出-1。
据我所知，你还不能只用 CSS 来处理宽度和高度。它有一个 CSS3 网络标准，定义了一个名为 object-fit (w3.org/TR/css3-images/#the-object-fit) 的属性，旨在解决这类问题。不幸的是，浏览器支持如下：caniuse.com/#feat=object-fit.

【解决方案3】：

在我看来，将图像放入容器并使其居中的最简单方法是使用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

【讨论】：

这样您将无法相对于图像定位任何其他元素（如控件）。我认为 OP 需要一个适合图像到它的容器（.featherlight-content）的解决方案。
这可能是最好的。我认为这个问题（还没有）一个完美的答案。我已经求助于使用Javascript。谢谢

【解决方案4】：

它被切断了，因为padding 把它扔掉了。
它在 IE 或 Firefox 中不起作用，因为它们不认为内容 div 的 height 应该拉伸以适应其容器的 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; }  }

【讨论】：

【解决方案5】：

在 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 像素的高度显示图像；最小高度为 700 像素的将显示为 600 像素，较小的将显示为 400 像素。

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

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

希望对你有帮助。

【讨论】：