Problem/Motivation

Cards currently allow a height and width to be defined in styles, however they only support 2 breakpoint changes. In all the sizes in-between, the image fills the top region of the card and can lead to cropping either above and below, on the side, or both. This makes it hard for images to be provided by the content editor, as no image correctly sits in that available space.

By changing image to lock their aspect ratio, the full image will always appear the same at all breakpoints. This also means that the image height will shrink as cards change width.

CommentFileSizeAuthor
#7 XS.png499.49 KBdanielgry
#7 S.png903.98 KBdanielgry
#7 M.png381.81 KBdanielgry
#7 L.png416.97 KBdanielgry
#7 XL.png519.75 KBdanielgry
#7 XXL.png628.97 KBdanielgry

Comments

alan.cole created an issue. See original summary.

alan.cole’s picture

alan.cole’s picture

Assigned: alan.cole » richardgaunt
Status: Active » Needs review
fionamorrison23’s picture

richardgaunt’s picture

Assigned: richardgaunt » danielgry

@danielgry This is on defaultdev.civictheme.io ready for testing

  • bbee0814 committed on 1.x
    Issue #3562786 by alan.cole: Added Promo Card and Event Card image...
danielgry’s picture

StatusFileSize
new628.97 KB
new519.75 KB
new416.97 KB
new381.81 KB
new903.98 KB
new499.49 KB

Verified and tested on latest dev version

Testing Results:
1. Verified Promo card and Event card thumbnails now keep their aspect ratio in all viewports.
2. Confirmed thumbnail images no longer crop on other cards in manual lists

Screenshots:
XXL:
image

XL:
image

Large:
image

Medium:
image

Small:
image

XS:
image

danielgry’s picture

Assigned: danielgry » richardgaunt
Status: Needs review » Reviewed & tested by the community
richardgaunt’s picture

Version: 1.12.2 » 1.13.0
Assigned: richardgaunt » Unassigned
Status: Reviewed & tested by the community » Fixed

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.