Correct way to deal with teaser and header images in minimal-mistakes

Help
1

Hello,

I will start by saying it is a great theme. Now, to the problem:

I notice that theme will hide part of the teaser image ( if it is in a grid layout) if its aspect ratio is not 3 by 2. Same with a header image of a post - depending on how wide a monitor is, the top and the bottom of the image can be cut. Or the opposite - if the monitor is super wide, the header can take half screen of the monitor.

Is there a setting in yaml that can prevent me from this by forcing an image to be full size? Or a way to set max width or height of an image and filling the empty spice with color? There surely must be a better way then cutting images to custom aspect ration.

Thanks.

2

Header images shouldn’t be hidden, see these example posts.

If you’re using a header with overlay the image is applied as a background, and can get cut. Overlay headers are dependent on the height of the content placed on top of it. Have a short title… It’s going to cause the parent container to have a reduced height.

3

Thanks for fast reply.

And what about teaser images?

4

For teaser images in the grid layout, they have a max-height set via CSS to keep everything uniform.

If that’s not to your taste you can remove these lines in /_sass/minimal-mistakes/_archive.scss.

.archive {
  .archive__item-teaser {
    @include breakpoint($small) {
      max-height: 200px;
    }

    @include breakpoint($medium) {
      max-height: 120px;
    }
  }
}