mkdocs-material: Logo has incorrect aspect ratio

Contribution guidelines

I’ve read the contribution guidelines and wholeheartedly agree

I’ve found a bug and checked that …

… the problem doesn’t occur with the mkdocs or readthedocs themes
… the problem persists when all overrides are removed, i.e. custom_dir, extra_javascript and extra_css
… the documentation does not mention anything about my problem
… there are no open or closed issues that are related to my problem

Description

When I set a logo image (as described in the docs), its aspect ratio is incorrect in the header. For example, here’s a sample logo I’m playing with:

logo

When I create a new MkDocs site, and use the latest Material theme, here’s what I’m seeing:

Expected behaviour

Icon renders at the same aspect ratio as the file

Actual behaviour

Logo is horizontally squished

Steps to reproduce

Create a new, empty MkDocs site, using the latest Material theme
Set a logo (maybe easier to see if you use a logo that’s not square)
mkdocs serve

Package versions

Python: Python 3.8.2
MkDocs: mkdocs, version 1.2.3
Material: Version: 8.1.7+insiders.4.6.1

Configuration

site_name: Test Site
theme:
  name: material
  logo: assets/logo.png

System information

Operating system: macOS Monterey, 12.0.1
Browser: Safari 15.1, Chrome 97, Firefox 96

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 20 (9 by maintainers)

Most upvoted comments

The defaults should cover most cases already, automatically adjusting sizing and keeping the aspect ratio, but the recommendation is to use a square logo.

squidfunk on Jan 5, 2024

IMHO a hint in the documentation would be good. We may also want to provide recipes for people whose logos are not square or do not gracefully scale to 120x120. Some more established institutions (cough, universities) have logos and corporate identity guidelines that make the business of integrating logos into the default layout difficult. I am pretty sure that it is just a question of a bit of CSS to accommodate, for example, a logo that needs to include the institution name.

alexvoss on Jan 5, 2024

Hey … FYI … that was the trick … to use your docker 😃 … glad I had this issue … now I will always be up-to-date … I will do the insiders docker setup soon. Have a great day.

VR2ualize on Jul 25, 2022

Fixed in e9211d908. The width is now set to auto, so the logo always stretches to the available height. I think this should be the best default. Otherwise, it’s always overridable with CSS. I tested with a long image:

squidfunk on Jan 23, 2022

Confirmed. I’m pretty stunned that nobody reported this up to now 😅 It’s been like that for ages.

squidfunk on Jan 23, 2022