2

这是我的代码：

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

3 回答 3

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

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

于 2013-05-31T20:41:41.563 回答
1

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

  });
});

谢谢他！

于 2013-06-01T08:35:07.040 回答
0

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

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

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

小提琴：这里

如果你能弄清楚，那就太好了！我们都需要这个。

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

于 2013-05-31T20:51:50.973 回答