How to align different sized images vertically and horizontally, evenly?

  • Resolved thelackof

    (@thelackof)


    11 years, 2 months ago

    If I have 10 images on a page but they are of all different dimensions, how would I align them in rows of say 5.

    so:

    o o o o o
    o o o o o

    all images are 200px wide but their heights are different.. which in turn pushes each image out of alignment.

    Is there a way to auto recognize the tallest dimension of all images and in turn scale the containing div of all other images to that height?

    Is there a plugin for this?

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)

  • You could try doing it as a gallery? Or make containers the size of the largest image and place them in there with no borders.

    I use nexGEN gallery

    Thread Starter thelackof

    (@thelackof)

    hrm… i wish there were another way.
    the problem is that my largest images can be drastically larger, and it varies when those images might show to viewers.

    Will the nexgen gallery take only my featured images and display them in gallery form on my home page?

    No reason you can’t do that using divs and CSS – are you familiar with HTML and CSS?

    Thread Starter thelackof

    (@thelackof)

    Ridiculously familiar.
    Can I set the featured image as a css background?
    I was just looking into it before your reply.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Could you link to the page in question?

    Thread Starter thelackof

    (@thelackof)

    I suppose I could manually create each thumbnail to size.

    Can I set the featured image as a css background?

    That’s still not going to work as your “box” divs will still have to be a fixed size in order to line up neatly. so you’ll just end up with poorly cropped images. If you want to control the images, then ideally you need to upload featured images of a standard height & width. Otherwise, let WP crop the images via fixed dimensions for the_post_thumbnail() or use ad_image_size() – again with fixed dimensions and a hard crop.

    Thread Starter thelackof

    (@thelackof)

    Figured out my own way.
    Thanks for the help.

    Here’s my code:

    <div class='thumb'>
 <?php if(has_post_thumbnail()) { $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'thumbname' ); echo '<a class="box" href="#" style="background-image:url(' . $image_src[0] . ');"></a>'; } ?>
</div><!-- thumb -->

    Where thumb was my container (image, text, etc).
    Instead of using <img src.. i used a link class and gave the link a width and height of 200px;

    Going to fix the sizes from here but that’s the gist.

    Just haven’t used css within html in a long time… used to using .css always.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to align different sized images vertically and horizontally, evenly?’ is closed to new replies.