Show full item image in tile instead of cropping top and bottom to fit

[Photonicsguy]

What is the problem you are trying to solve with this feature?

I've been manually modifying the images to add white space to allow the full item to appear in the tile, however, I'd like to suggest that the css be modified to allow the full image to be shown rather than the current method of sizing horizontally and cropping the top and bottom.

What is the solution you are proposing?

I believe editing frontend/assets/css/main.css and frontend/components/Item/Card.vue are required.
(I'm not good with style names)

• Create a new style for the parent div containing the image which sets the background to white (or a theme colour):
  .i-tile{ background-color:#FFF; }
• Create a new style for the image:
  .i-full{ object-fit: contain !important; margin:auto; }
• Add the classes to the img and parent div in frontend/components/Item/Card.vue
• A special case is when there is no image for the item and /no-image.jpg is used.

I know this might not be desired for everyone, so it might need to be implemented as an option in settings, or a item specific option.
(Or even item specific setting for background colour choice of theme or transparent)

What alternatives have you considered?

Manually modifying each image prior to upload in order to add white space.

Additional context

A preview of what I'm proposing can be done with the following javascript:

document.styleSheets[0].insertRule('.i-full{object-fit:contain!important;margin:auto;}');
document.styleSheets[0].insertRule('.i-tile{background-color:#FFF;}');
document.querySelectorAll('img.w-full').forEach(i=>{
  if(i.src.endsWith('no-image.jpg')) return;
  //i.classList.remove('w-full')
  i.classList.add('i-full');
  i.parentElement.classList.add('i-tile');
});

Contributions

• I have searched through existing issues and feature requests to see if my idea has already been proposed.
• If this feature is accepted, I would be willing to help implement and maintain this feature.
• If this feature is accepted, I'm willing to sponsor the development of this feature.

[tonyaellie]

current

with change

I think the best option is having a per image option of whether the image should use contain or cover with the same current default?

If we do go with it being an option we could add an inventory action to convert all current images to either option and add the ability to change the default in browser.

[jondycz]

Well, most people don't use images of lakes as images for their product warranties. Most eshops use white as a background. If that's not desirable, we could also overlay the two images on top of each other, the bottom one being set to cover, the top one to 'contain' and blurring the one in the background. Kind of like what you often see on Instagram

[tankerkiller125]

Please note we're converting this issue into a discussion as per our new procedures/policies. You can read more about that in our announcement #712

[Eternal21]

I came across a similar problem in my workflow (#968). For my particular use case, a single global setting would be sufficient, as long as it would let me specify to show the whole image in the thumbnail, rather than just a part of it (i.e. contain vs. cover mentioned earlier).