水平居中和垂直居中响应图像
问题描述:
我试图在水平和垂直居中的变化高度和宽度的div内获取图像。 到目前为止,这么好。(请参阅下面的jsfiddle链接)水平居中和垂直居中响应图像
现在,捕捉是图像也应该是响应和调整,如果容器的高度和/或宽度小于图像的高度或宽度。
研究,经历各种不同的“解决方案”在那里摆弄和一个解决方案后,我无法找到最完美的一个,但是两人来到靠近:
1)这第一个广告我需要的一切除时的窗口宽度比图像宽度,图像不再是水平排列的:
http://jsfiddle.net/me2loveit2/ejbLp/8/
HTML
<div class="overlay">
<div class="helper"></div>
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
CSS
.helper {
height:50%;
width:100%;
margin-bottom:-240px;
min-height: 240px;
}
.overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.5);
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display: block;
}
2)第二个例子使一切排列,但图像没有缩小时,高度小于图像高度:
http://jsfiddle.net/me2loveit2/ejbLp/9/
HTML
<div id="outer">
<div id="container">
<img src="http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable">
</div>
</div>
CSS
#outer {
height:100%;
width:100%;
display:table;
position:fixed;
top:0px;
left:0px;
background-color: rgba(0, 0, 0, 0.5);
}
#container {
vertical-align:middle;
display:table-cell;
max-width: 100%;
max-height: 100%;
}
img {
margin: 0 auto;
max-width: 100%;
max-height: 100%;
display:block;
}
答
我已经在过去,唯一的非JS解决方案,我想出来的(这是frowned upon,顺便说一句)试图这个是这样的:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
display: table;
}
.container {
display: table-cell;
vertical-align: middle;
border: 1px solid #f00;
}
.container > div {
width: 100%;
height: 100%;
margin: 0 auto;
border: 1px solid #00f;
max-width: 550px;
max-height: 480px;
background: url("http://dummyimage.com/550x480/000/fff?text=H/V Centered and height/width variable") 50% 50% no-repeat;
background-size: contain;
}
<div class="container"><div></div></div>
将div的背景颜色设置为黑色以查看没有图像边缘的缩放。我使用了这些尺寸,以便通过调整框架来测试它。
这很好,但我需要的图像不会比它大,只有在较小的窗口上才能缩小。它应该保持水平和垂直居中,就像我的例子。 –
我再次玩了一遍,并设法结合使用你的背景而不是图像的方法工作的小提琴:http://jsfiddle.net/me2loveit2/ejbLp/11/ –
我编辑它..现在好点? – LGT