0

因此，制作流畅图像的经典方法是使用 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/

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

在此处输入图像描述

4

2 回答 2

0

我想你可以使用职位。

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

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

于 2014-10-20T11:45:22.627 回答
0

请检查这个小提琴 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%;
        }
于 2014-10-20T11:59:46.367 回答