Adjusting image size/layout on a grid TOC page

[zsofiaj]

I am curious if there is an easy way to adjust the image sizing on a grid contents page. Has anyone tried this? In my project, I have some images that are very narrow and tall, and others are very horizontal, so in the default layout, the horizontal objects end up looking tiny. We would like the objects to appear more equal in size, so it would be best if I could limit the size of each object by a max length for the longest side. Is that possible to do with custom css? I've attached a screenshot of one of our grid TOC pages.

I am working in Quire v 1.0.0-rc.7.

[geealbers]

In your custom.css file, you can set a fixed height for those images and then use "object-fit: contain;" which will scale each image to fill as much of the box as possible while still maintaining its aspect ratio:

.quire-contents-list.grid .image img {
  height: 200px;
  object-fit: contain;
}

In think you'll then also want to remove the box shadow that appears on hover, as it will no longer fit the image borders properly and will look a little odd:

.quire-contents-list.grid ol li .card .card-image .image:hover {
  box-shadow: none;
}

[zsofiaj]

Thank you so much, @geealbers , this is so much better, at least in terms of giving the objects more equal weight. It isn't quite as nice in terms of design, but I think our author will prefer it. Would it be easy enough to decrease the padding a bit, if we wanted the images to be slightly closer together?

[geealbers]

To adjust the spacing between items, you can play with this value:

.quire-contents-list.grid ol li .card .card-image {
  padding: 0;
}

As well as maybe this one:

.quire-contents-list.grid ol {
  grid-gap: 0;
}