CODEWITHSUNDEEP
javascriptjquerycssvertical-alignment
web-tiki
web-tiki

Reputation: 103810

Vertical adaptive image alignment on adaptive layout

This is my code :

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

I have been looking for this for ages and can't figure it out...

Unknown height of divs and images images can change. How can I vertical align the images inside the divs class="one"? as this is an adaptive layout, images must be scaled to prevent overflow.

table-cell or line-height = 100% doen't seem to work.

Do I realy need javascript here? I have tried a jquery code but it is above my knowledge and ends up changing the margin of all the images in my website... here it is : 

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

Upvotes: 2

Views: 814

Answers (3)

web-tiki
web-tiki

Reputation: 103810

Ok I finaly found a solution using jquery thx to bdmoura in this post : https://stackoverflow.com/users/2442497/bdmoura He showed me how to set an adaptive margin to the images according to image and div height. here is th jquery code : 

$(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');

  });
});

thx to him!

Upvotes: 1

Marc Audet
Marc Audet

Reputation: 46825

You can do this easily enough with the following 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>

and apply the following CSS styling:

.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;
}

In this particular layout, I assumed that each panel has 33.3% of the total width and that the images auto scale to fit the width of the table-cell div.

Demo Fiddle: http://jsfiddle.net/audetwebdesign/ZBNh7/

Upvotes: 2

nouveau
nouveau

Reputation: 1272

Yes. I think at this point you'll need jQuery / javaScript.

You can only really align img's or inline / inline-block elements to one another.

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

fiddle: HERE

It would be great if you figure it out! We all need this.

You could use table-cell as mentioned... but in a responsive setting, this isn't going to cut it - especially if these blocks are in a responsive grid. Once you need to float, which is pretty much always - things are going to get really messy. Mystery.

Upvotes: 0

Related Questions