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

Vertical adaptive image alignment on adaptive layout

本文关键字：自适应 图像 对齐 垂直 布局      更新时间：2023-09-26

这是我的代码:

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和images的未知高度图像可以改变。如何垂直对齐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的宽度。

Demo提琴:http://jsfiddle.net/audetwebdesign/ZBNh7/

好吧，我终于找到了一个解决方案，使用jquery的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');
  });
});

感谢他!

是。我认为在这一点上，你需要jQuery/javaScript。

你只能真正对齐img或inline/inline-block元素。

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

小提琴:

如果你能弄明白就太好了!我们都需要这个

你可以像前面提到的那样使用table-cell…但在响应式设置中，这是行不通的——尤其是当这些块位于响应式网格中时。一旦你需要浮动，这几乎总是 -事情会变得非常混乱。谜。

相关文章：