最大高度而不是最大宽度的流体图像
[英]fluid images with max-height instead of max-width
问题描述
So the classic way of doing fluid images is with the max-width/height combo on the img css. 
因此，制作流体图像的经典方法是使用img css上的max-width / height组合键。
img { max-width:100%; height: auto;}
however I am in a situtation where I actually want the image to resize based on the containter's height limitation and not its width. 但是，我处于一种情景中，实际上我希望根据容器的高度限制而不是宽度来调整图像的大小。 I thought that a simple swap of properties would do the trick, but apparently it is not that simple. 我以为，简单地交换属性就能解决问题，但显然不是那么简单。 Check the fiddle bellow. 检查小提琴波纹管。 If I set the container (wrap)'s width to a fixed pixel dimension, the image works as it should. 如果将容器（包装）的宽度设置为固定的像素尺寸，则图像将按预期工作。 However, if I change the img css to 但是，如果我将img css更改为
img { max-height:100%; width: auto;}
and force a pixel height, nothing really happens. 并强制像素高度，实际上什么也没发生。
jsfiddle: see updates bellow jsfiddle：查看下面的更新
Just to give you a little more insight of what I am trying to achieve. 只是为了让您对我要实现的目标有更多的了解。 I will have a number of full-window containers one on top of each other. 我将有许多个全窗口容器彼此重叠。 Each container should take the whole window space. 每个容器应占据整个窗口空间。 This is why I need the image to flex its dimensions depending on the container height (I am aware I may have to resort to jquery to force the container's height). 这就是为什么我需要根据容器的高度调整图像尺寸的原因（我知道我可能不得不诉诸于jquery来强制容器的高度）。
thanks for any insight 感谢您的任何见解
update! 更新！
I have created two fiddles to better illustrate my ultimate goal. 我创建了两个小提琴来更好地说明我的最终目标。
I want to be able to stack containers that are each as tall as the whole window. 我希望能够堆叠每个与整个窗口一样高的容器。 Scaling the image up or down fluidly to help achieve this. 流畅地上下缩放图像以帮助实现此目的。
fiddle1: wrapper element is set to 100% width+height. fiddle1：包装元素设置为100％宽度+高度。 if width is reduced, the image fluidly resizes. 如果减小宽度，则图像会流畅地调整大小。
http://jsfiddle.net/1geyww63/ http://jsfiddle.net/1geyww63/
fiddle2: wrapper element is set to a given pixel height. fiddle2：将包装元素设置为给定的像素高度。 I would expect/imagine/cross my fingers that image would resize fluidly too fitting in all the content and the container's set height be respected. 我希望/想象/用手指指望图像会流畅地调整大小，使其适合所有内容，并且容器的设置高度也应得到尊重。 This however does not happen. 但是，这不会发生。
http://jsfiddle.net/1geyww63/4/ http://jsfiddle.net/1geyww63/4/
I hope I have made myself more understandable. 我希望我使自己更容易理解。 I didn't want to throw too much information there. 我不想在那里扔太多信息。 My main question remains how to make images resize fluidly with a height "centric" approach as opposed to the width. 我的主要问题仍然是如何使用高度“中心”方法而不是宽度来使图像流畅地调整大小。
2 个解决方案
解决方案1
0 2014-10-20 11:45:22
I guess you can use positions. 我想你可以使用职位。
You have to set wrapper for relative and img for absolute position: 您必须为相对位置设置包装器，为绝对位置设置img：
http://goo.gl/n5CkRx simple example http://goo.gl/n5CkRx简单示例
解决方案2
0 2014-10-20 11:59:46
Please check this Fiddle http://jsfiddle.net/q24j47tt/2/ . 请检查此小提琴http://jsfiddle.net/q24j47tt/2/ 。 If this is what you want. 如果这是您想要的。 Your question lacks some information. 您的问题缺少一些信息。 If you please elaborate the problem then we might be able to find the solution. 如果您能解决问题，那么我们也许可以找到解决方案。
HTML 的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 的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%;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.