CSS/Javascript Solution to automatically apply height/width attributes based on image orientation

2 Views

So I’m designing a WordPress theme and I have four divs (380×400) that I’m using thumbnails from the posts to fill as a background, the problem is, if the picture is landscape it leaves a gap at the bottom so I can’t use width:100% in the CSS, same problem with the height on a portrait image if I use height:100%.

What I was looking to do was to assign a width property of 100% if the height of the images is greater than the width(e.g. style.width='100%') and the height if the width is greater than the height. I’m looking for simplicity, I don’t mind using a jQuery solution but I’m really not familiar with jQuery. I also have no problem if the image is cropped off the edges just so long as the aspect ratio remains intact.

Read More

Attached is the Screenshot of the situation I’m describing.

Here’s the relevant code: 

    <?php $thumbnail = '';
      $post_image_id = get_post_thumbnail_id($post_to_use->ID);
      if ($post_image_id) {
        $thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
        if ($thumbnail) (string)$thumbnail = $thumbnail[0];
        }
      if (!empty($thumbnail)) { ?>
<div class="item" id="post-<?php the_ID(); ?>">
   <img class="background" src="<?php echo $thumbnail; ?>" onload="changeWidth(this);">
<div class="date">
<?php the_date(); ?>
</div>

CSS: 

.item, .no-thumbnail{
  width:380px;
  height:400px;
  margin:5px 0px;
  border:1px solid black;
  float:left;
  position:relative;
  margin:5px;
  display:inline;

}

.item img.background{
  position:absolute;
  left:0px;
  z-index:-500;
  width:150%;
 }
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Since you display thumbnails and text in a grid, the both good and easy way out is to make all the thumbnails the same size. You can and either trim the photos when you generate the thumbnails, or hide the rest with css. This will make your grid look cleaner and it is easier on the eyes if text and photos all line up.

    If you still want to show the entire thumbnail, you could use CSS/javascript/jQuery to show it when hovering over the “fixed size” thumbnail in the grid.

    Edit: created an example to show clipping centered thumbnails of different orientation/aspect ratios. All it takes is a container (mainly to set the width of the gallery), and <a href="..." style="background-image: url(...);"></a> to both show the thumbnail and provide a link for the full photo.

    I didn’t include title nor photographer in this example. The <a /> tag acts as a container – should be possible to add text within it and then position it as needed.