具有最大高度而不是最大宽度的流体图像答案

【问题标题】：fluid images with max-height instead of max-width具有最大高度而不是最大宽度的流体图像
【发布时间】：2014-10-21 19:39:32
【问题描述】：

因此，制作流畅图像的经典方法是使用 img css 上的最大宽度/高度组合。

img { max-width:100%; height: auto;}

但是，我实际上希望图像根据容器的高度限制而不是其宽度来调整大小。我认为简单的属性交换就可以解决问题，但显然不是那么简单。检查小提琴波纹管。如果我将容器（包装）的宽度设置为固定的像素尺寸，则图像可以正常工作。但是，如果我将 img css 更改为

img { max-height:100%; width: auto;}

并强制一个像素高度，什么都没有发生。

jsfiddle：请参阅下面的更新

只是为了让您更深入地了解我想要实现的目标。我将有许多全窗容器一个一个放在一起。每个容器都应该占据整个窗口空间。这就是为什么我需要图像根据容器高度来调整其尺寸（我知道我可能不得不求助于 jquery 来强制容器的高度）。

感谢您的任何见解

更新！

我创造了两个小提琴来更好地说明我的最终目标。

我希望能够堆叠每个与整个窗口一样高的容器。流畅地放大或缩小图像以帮助实现这一目标。

fiddle1: 包装元素设置为 100% 宽度+高度。如果宽度减小，图像会流畅地调整大小。

http://jsfiddle.net/1geyww63/

fiddle2: 包装元素设置为给定的像素高度。我希望/想象/交叉手指，图像会流畅地调整大小，太适合所有内容，并且容器的设定高度会受到尊重。然而这并没有发生。

http://jsfiddle.net/1geyww63/4/

我希望我让自己更容易理解。我不想在那里提供太多信息。我的主要问题仍然是如何使用高度“中心”的方法而不是宽度来流畅地调整图像大小。

【问题讨论】：

这里是您需要的样本，希望对您有所帮助codepen.io/anon/pen/gdKfw, stackoverflow.com/questions/18251322/…
感谢@Aru，有点像，但不完全是。该示例奇怪地允许图像扭曲，这是我想避免的。如果可以的话，我想使用 display: table 其他原因（但这最终可能是一厢情愿的想法）。

标签： html css fluid-layout fluid-images

【解决方案1】：

我猜你可以使用位置。

您必须为相对位置设置包装器，为绝对位置设置 img：

http://goo.gl/n5CkRx 简单示例

【讨论】：

一旦你开始在它周围放置其他元素，它就不起作用了。只有当图像是容器内的唯一元素并且其高度以像素/ems 为单位设置时，它才会起作用...

【解决方案2】：

请检查此Fiddle http://jsfiddle.net/q24j47tt/2/。如果这是你想要的。你的问题缺少一些信息。如果您能详细说明问题，那么我们或许能够找到解决方案。

HTML

<body>
<div class="wrapper">
    <div class="main">
        <div class="content">
            <div class="hcenter">
                <img src="http://lorempixel.com/640/480/people" alt="">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.
                    <br>More Lorem
                    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus voluptas obcaecati consequuntur asperiores debitis. Corporis, dignissimos qui! Consequuntur ad, modi ex pariatur cupiditate optio recusandae dolores aperiam laudantium itaque aspernatur.</p>
            </div>
        </div>
    </div>
    <div class="footer">footer content</div>
</div>

CSS

html, body {
            margin: 0;
            height: 100%;
        }
        img {
            /* img width responds to wrapper width*/
            max-width: 100%;
            height: 100%;

        }
        .wrapper {
            display: block;
            position: relative;
            height: 100%;
            width: 100%;
            background-color: yellow;
        }
        .main{
            display: block;
            height: 100%;
            position: relative;

        }
        .footer {
            display: table-row;
        }
        .footer {
            background-color: #333;
            color: #fff;
            height: 3em;
        }
        .main .content {
            vertical-align: middle;
            display: block;
            position: relative;
            height: 100%;
        }
        .hcenter {
            max-width: 600px;
            margin: 0 auto;
            display: block;
            position: relative;
            height: 100%;
        }

【讨论】：

感谢@abir_maiti，但在您的示例中，图像似乎也没有响应父级的设定高度。将宽度和高度都设置为 100% 也会导致图像扭曲，这并不理想。我已经用两个更新的示例更新了帖子，并将尝试使用 display: block 来查看它是否有任何区别（尽管这样做会影响垂直对齐和页脚定位）。我会试试的