Limiting hero-image max width?

Help
1

I am using Minimal Mistakes and loving it so far, but I have one problem that I haven’t managed to fix.

Currently the hero image fills the entire width of the browser and keeps the image’s aspect ratio. On larger monitors it gets so large that it hides all the content below it, requiring the user to scroll down.

How can I make the hero image be the same as the content, and still keep its aspect ratio?

2

Do you have a link to the theme’s docs around CSS or hero image configuration?
Is there an issue or Discussion topic on the theme’s repo already about this?

3

Search the closed issues and discussions. I’ve answered similar questions a few times before that should point you in the right direction.

2 Likes
4

If I am not mistaken, you are saying the image is stretched out and you are losing the aspect ratio, is that correct?

If so, you can override the img tag for the hero image with the following CSS:

img { 
  object-fit: cover;
}

Of course you can replace the img text with .my-image if you have a custom class defined.

What this command does is stretch the image as far as you want, but does so keeping the aspect ratio. Then, the browser determines what area the image can fit in and evenly crops out the parts of the image that do not fit.

Here is a link to the documentation:

Here is an article I wrote that explains the idea:

Here is a video that walks you through the process:

I am not familiar with the minimal mistakes theme, but I am guessing if you follow these concepts it could help resolve the problem. If you need additional support, please share a link to your repo and if you cannot do that, the website link.

2 Likes