这是我的代码:
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和图像的未知高度图像可能会发生变化。 如何在divs 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");
}
});
});
答案 0 :(得分:2)
您可以使用以下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%,并且图像自动缩放以适合表格单元格的宽度。
答案 1 :(得分:1)
好的,我在这篇文章中最终找到了一个使用jquery thx到bdmoura的解决方案: https://stackoverflow.com/users/2442497/bdmoura 他向我展示了如何根据图像和div高度为图像设置自适应边距。 这是jquery代码:
$(document).ready(function() {
$(".one").each(function(){
var wrap = $(this),
wrapH = wrap.outerHeight(),
img = wrap.find('img'),
image = new Image(),
imgH = 0,
padTop = 0;
image.onload = function () {
imgH = img.outerHeight();
padTop = ( wrapH - ( imgH ) )/2;
if ( padTop > 0 ){
img.css("margin-top", padTop + "px");
}
}
image.src = img.attr('src');
});
});
谢谢他!
答案 2 :(得分:0)
是。我想在这一点上你需要jQuery / javaScript。
您只能将img或inline / inline-block元素彼此对齐。
.block img {
/* display: inline; (default) */
display: inline-block;
vertical-align: middle;
}
小提琴:HERE
如果你弄清楚它会很棒!我们都需要这个。
你可以使用上面提到的table-cell ...但是在响应式设置中,这不会削减它 - 特别是如果这些块在响应式网格中。一旦你需要浮动,这几乎总是 - 事情会变得非常混乱。谜。