Question

因此，制作流畅图像的经典方法是使用img css上的max-width / height组合。

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

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

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

并强制像素高度，没有任何实际发生。

jsfiddle：见下文更新

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

感谢任何见解

更新<！/ H2>
我创造了两个小提琴来更好地说明我的最终目标。

我希望能够堆叠每个与整个窗口一样高的容器。向上或向下缩放图像以帮助实现此目的。

fiddle1：包装元素设置为100％宽度+高度。如果宽度减小，图像会流动调整大小。

http://jsfiddle.net/1geyww63/

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

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

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

Answer 1

我猜你可以使用职位。

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

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

Answer 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%;
        }

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

2 个答案: