Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

The Holy Grail of Logo Sizing

Parent Feed: 

So many times, I see sites with a responsive grid of logos that only rely on width as the limiter. When doing so, square or vertical logos appear disproportionately large compared to their horizontal counterparts. 

Exhibit A (BADCamp 2018’s sponsor footer) 
Square logos appear much larger than their horizontal neighbors

The fix took me a long time to find, but I have it in my toolkit and use it on all my projects. But after seeing yet another camp site with crazy logo sizing, I realized sharing this snippet was long overdue (as well as a pull request to the BADCamp repo).

The parent element (usually the tag) needs this code:

display: block;
width: 100%;
position: relative;
height: 0;
padding: 56.25% 0 0 0; // this assumes a 16:9 aspect ratio
overflow: hidden;

And the child image needs this code:

position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

Or if you are a fan of SASS mixins, you can get fancy and just include this on the logo’s parent element and input whichever ratio you like:

// set aspect ratio of a field
@mixin aspect-ratio($width, $height) {
  display: block;
  width: 100%;
  position: relative;
  height: 0;
  padding: ($height / $width) * 100% 0 0 0;
  overflow: hidden;
  > img {
    position: absolute;
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

In the case of the BADCamp sponsor footer, we now get this:
A mix of square and horizontal logos locked at 16:9 aspect ratio

Enjoy!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web