Question

这是我的代码：

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");
      }
  });
});

Answer 1

您可以使用以下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％，并且图像自动缩放以适合表格单元格的宽度。

演示小提琴：http://jsfiddle.net/audetwebdesign/ZBNh7/

Answer 2

好的，我在这篇文章中最终找到了一个使用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');

  });
});

谢谢他！

Answer 3

是。我想在这一点上你需要jQuery / javaScript。

您只能将img或inline / inline-block元素彼此对齐。

.block img {
    /* display: inline; (default) */
    display: inline-block;
    vertical-align: middle;
}

小提琴：HERE

如果你弄清楚它会很棒！我们都需要这个。

你可以使用上面提到的table-cell ...但是在响应式设置中，这不会削减它 - 特别是如果这些块在响应式网格中。一旦你需要浮动，这几乎总是 - 事情会变得非常混乱。谜。

自适应布局上的垂直自适应图像对齐

3 个答案: