Make payment method icons display well even if theme tries to override their height/width

[opr]

Note: I couldn't replicate the issue reported in #4371 without adding custom CSS, such as:

.wp-block-woocommerce-cart img,
.wp-block-woocommerce-checkout img {
    height: auto !important;
    width: 100% !important;
}

I added this through an option in the theme, but you could also add it to {your-theme}/style.css.

This PR will add a max-height and max-width to payment method icons, we've seen a couple of instances of themes adding 100% width to images which have been applied to the payment icons.

It also adds the icons to a flex container to ensure they display in a row and wrap onto the next line if there are too many icons to fit on one line.

It also changes the display of the individual payment method icons on the Checkout page, it sets object-fit: cover and object-position: left so that even if themes have set 100% width on images, any payment method image won't stretch.

Fixes #4371 (I can't replicate #4371 but have emulated using custom CSS.)

Screenshots

Cart

Before	After

Checkout

Before	After

How to test the changes in this Pull Request:

1. Add some custom CSS to your theme, do something that will "accidentally" catch all images in the Cart/Checkout blocks, e.g:

.wp-block-woocommerce-cart img,
.wp-block-woocommerce-checkout img {
    height: auto !important;
    width: 100% !important;
}

2. Go to the Cart and Checkout blocks and ensure that the payment method icons display correctly and are not too large.
3. Experiment with a few different themes and ensure this works for each one you test.

Changelog

Ensure payment method icons are constrained to a reasonable size in the Cart and Checkout blocks.

[github-actions]

Size Change: +122 B (0%)

Total Size: 979 kB

Filename	Size	Change
build/wc-blocks-style-rtl.css	19.2 kB	+62 B (0%)
build/wc-blocks-style.css	19.2 kB	+60 B (0%)

ℹ️ View Unchanged

Filename	Size
build/active-filters-frontend.js	8.28 kB
build/active-filters.js	7.84 kB
build/all-products-frontend.js	23.1 kB
build/all-products.js	37.3 kB
build/all-reviews.js	9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js	2.57 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js	1.82 kB
build/atomic-block-components/add-to-cart--atomic-block-components/image--atomic-block-components/title.js	333 B
build/atomic-block-components/add-to-cart-frontend.js	8.64 kB
build/atomic-block-components/add-to-cart.js	7.72 kB
build/atomic-block-components/button-frontend.js	1.74 kB
build/atomic-block-components/button.js	873 B
build/atomic-block-components/category-list-frontend.js	469 B
build/atomic-block-components/category-list.js	477 B
build/atomic-block-components/image-frontend.js	1.87 kB
build/atomic-block-components/image.js	1.35 kB
build/atomic-block-components/price-frontend.js	2.08 kB
build/atomic-block-components/price.js	2.1 kB
build/atomic-block-components/rating-frontend.js	559 B
build/atomic-block-components/rating.js	566 B
build/atomic-block-components/sale-badge-frontend.js	854 B
build/atomic-block-components/sale-badge.js	866 B
build/atomic-block-components/sku-frontend.js	389 B
build/atomic-block-components/sku.js	393 B
build/atomic-block-components/stock-indicator-frontend.js	609 B
build/atomic-block-components/stock-indicator.js	610 B
build/atomic-block-components/summary-frontend.js	905 B
build/atomic-block-components/summary.js	911 B
build/atomic-block-components/tag-list-frontend.js	465 B
build/atomic-block-components/tag-list.js	471 B
build/atomic-block-components/title-frontend.js	1.44 kB
build/atomic-block-components/title.js	1.28 kB
build/attribute-filter-frontend.js	17.9 kB
build/attribute-filter.js	11.7 kB
build/blocks-checkout-editor.js	10.8 kB
build/blocks-checkout.js	20.2 kB
build/cart-frontend.js	79.2 kB
build/cart.js	45.9 kB
build/checkout-frontend.js	83.4 kB
build/checkout.js	48.2 kB
build/featured-category.js	7.39 kB
build/featured-product.js	9.55 kB
build/handpicked-products.js	6.55 kB
build/price-filter-frontend.js	14.4 kB
build/price-filter.js	9.57 kB
build/price-format.js	1.38 kB
build/product-best-sellers.js	6.73 kB
build/product-categories.js	3.38 kB
build/product-category.js	7.59 kB
build/product-new.js	6.89 kB
build/product-on-sale.js	7.23 kB
build/product-search.js	2.68 kB
build/product-tag.js	6.7 kB
build/product-top-rated.js	6.85 kB
build/products-by-attribute.js	7.82 kB
build/reviews-by-category.js	11.5 kB
build/reviews-by-product.js	13.1 kB
build/reviews-frontend.js	9.18 kB
build/single-product-frontend.js	25.8 kB
build/single-product.js	9.87 kB
build/vendors--atomic-block-components/price-frontend.js	6.51 kB
build/wc-blocks-data.js	10.9 kB
build/wc-blocks-editor-style-rtl.css	14.9 kB
build/wc-blocks-editor-style.css	14.9 kB
build/wc-blocks-google-analytics.js	1.99 kB
build/wc-blocks-middleware.js	1.48 kB
build/wc-blocks-registry.js	2.75 kB
build/wc-blocks-shared-context.js	1.54 kB
build/wc-blocks-shared-hocs.js	1.75 kB
build/wc-blocks-vendors-style-rtl.css	1.05 kB
build/wc-blocks-vendors-style.css	1.05 kB
build/wc-blocks-vendors.js	240 kB
build/wc-blocks.js	3.51 kB
build/wc-payment-method-bacs.js	812 B
build/wc-payment-method-cheque.js	807 B
build/wc-payment-method-cod.js	903 B
build/wc-payment-method-paypal.js	844 B
build/wc-payment-method-stripe.js	12.3 kB
build/wc-settings.js	2.93 kB

_{compressed-size-action}

[Aljullu]

Looking great, thanks @opr! 👏