Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughThe Holy Grail of Logo Sizing
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 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!
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