这是我的代码:
HTML
<html>
<body>
<div id="id">
<div class="one">
<img>
</div>
<div class="two">
<img>
</div>
<div class="one">
<img>
</div>
</div>
</body>
</html>
CSS
div{
float : left;
width : 33,3%
height : 100%;
}
img{
max-width : 100%;
max-height : 100%;
}
div#id{
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
}
我找了好久了，还是没找到……
div 和图像的未知高度图像可能会发生变化。 如何垂直对齐 div class="one"内的图像？ 由于这是自适应布局，因此必须缩放图像以防止溢出。
table-cell 或 line-height = 100% 似乎不起作用。
我真的需要 JavaScript 吗？ 我尝试过 jquery 代码，但它超出了我的知识范围，最终改变了我网站中所有图像的边距...这里是:
$(document).ready(function() {
$(".one").each(function(){
var wrapH = $(".one").outerHeight();
var imgH = $("img").outerHeight();
var padTop = (wrapH-(imgH))/2;
if (padTop>0){
$("img").css("margin-top", padTop + "px");
}
});
});
最佳答案
您可以使用以下 HTML 轻松完成此操作:
<div class="wrap">
<div class="image-panel">
<img src="http://placekitten.com/300/300">
</div>
<div class="image-panel">
<img src="http://placekitten.com/400/600">
</div>
<div class="image-panel">
<img src="http://placekitten.com/200/600">
</div>
</div>
并应用以下 CSS 样式:
.wrap {
border: 1px dotted blue;
display: table;
width: 100%;
}
.image-panel {
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px dashed blue;
width: 33.3333%;
padding: 10px;
}
.image-panel img {
width: 100%;
display: block;
}
在此特定布局中，我假设每个面板占总宽度的 33.3%，并且图像会自动缩放以适合表格单元格 div 的宽度。
演示 fiddle :http://jsfiddle.net/audetwebdesign/ZBNh7/
关于javascript - 自适应布局上的垂直自适应图像对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16865457/