The Holy Grail of Logo Sizing

Submitted by kthull on Wed, 08/29/2018 - 17:39

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 <a> 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!