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

【问题标题】：Vertical adaptive image alignment on adaptive layout自适应布局上的垂直自适应图像对齐
【发布时间】：2013-05-27 18:10:39
【问题描述】：

这是我的代码：

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

【问题讨论】：

标签： javascript jquery css vertical-alignment

【解决方案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%，并且图像会自动缩放以适应表格单元格 div 的宽度。

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

【讨论】：

好的，这适用于我的原始代码（我错过了图像很大并且应用了 max-whith、max-height）我更新了我的问题。
所以你想要连续三张图片？并自动缩放以使其适合三个等宽的面板？
是的，就是这样，图像自动缩放，布局适应屏幕。
感谢您的回答，这适用于 width : 100% 但图像在底部溢出并过度缩放，我不能这样。我真的需要 max-width 和 max-height 的效果......
在我的demo中，哪个图片应该控制父div的高度？请记住，父 div 相对于其包含元素的高度为 100%，但尚未指定。那么，如果你有一些横向元素和纵向元素，你想控制哪一个高度呢？

【解决方案2】：

是的。我认为此时您将需要 jQuery / javaScript。

您只能真正将 img 或内联/内联块元素彼此对齐。

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

小提琴：HERE

如果你能解决它，那就太好了！我们都需要这个。

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

【讨论】：

我并不经常需要它。我只是不指望它会成为一种选择。几天来，我一直在尝试垂直对齐徽标和移动导航按钮。我要搞乱马克的回答。不适用于您的情况 - 但可能适用于我的小情况。

【解决方案3】：

好的，我终于在这篇文章中找到了使用 jquery thx 到 bdmoura 的解决方案： https://stackoverflow.com/users/2442497/bdmoura 他向我展示了如何根据图像和 div 高度为图像设置自适应边距。这是 th 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');

  });
});

感谢他！

【讨论】：