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)
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:
Enjoy!