How to display a full, uncropped image in a section card (prevent zoom)?

[AlexPayome]

I'm using the latest version of Hinode (v1.10.0) and I'm trying to display my company's logo in a card on my homepage section.

This is my section configuration from params.toml:

[sections.about_us]
        title = "Nosotros"
        sort = "date"        
        reverse = false     
        nested = true
        cols = 3
        color = "" 
        padding = "0"
        header = "full"
        footer = "none"
        orientation = "stacked"
        style = "border-0"
        homepage = 3
        separator = true
        limit = 0 

The Problem:
The card image is displayed with a "zoom" effect, cropping it to fill the entire space.

My Goal:
I would like the image to be displayed completely, without being cropped, while maintaining its aspect ratio

What is the recommended way to achieve this with the Hinode theme? Is there a specific parameter in the configuration or front matter that I should be using?

Thank you for your guidance!

[markdumay]

It appears you're using a page section configuration, which is no longer supported since Hinode v1 (see this announcement). The correct way in Hinode v1 is to use content blocks. Below is an example. It includes the class attribute card-zoom, which is a zoom effect when you hover a card. You can simply drop this attribute to remove the zoom effect. Hopefully this will guide you in the right direction.

- _bookshop_name: articles
  heading:
    title: Guides
    align: start
  input:
    section: guides
    reverse: true
    sort: title
  hide-empty: false
  header-style: none
  more:
    title: More Guides
  padding: 0
  max: 3
  class: border-0 card-zoom card-body-margin

One more thought, if you're using an .svg for your logo, you might need some additional tweaking. Vector graphics tend you behave differently compared to bitmap images.

[AlexPayome]

Hello, thank you for your response, it was very helpful and now I'm using content blocks for my sections on the homepage. The problem is that I removed the card-zoom attribute, but the image in the section still appears zoomed in.

This is how I left the section:

- _bookshop_name: articles
    heading:
      title: Nosotros
      align: start
    input:
      section: about_us
      reverse: true
      sort: title
    hide-empty: false
    header-style: none
    background: body-tertiary
    padding: 0
    class: border-0 card-body-margin

How do I edit how the images are displayed in the section? Or is there no way to remove the zoom?

[markdumay]

In general, card images are clipped to fit. The "zoom" effect is stronger when there is a mismatch between the aspect ratio of the image and the card's image container. The site w3schools gives an example of such an effect, see object-fit: cover.