Ionic-framework: feat: feat: keep image aspect ratio in item-thumbnail

[alvaromb]

Type: feat

Platform: all

When using a non-squared image in item-thumbnail class, the image aspect ratio is not maintained.

Example:

<a collection-repeat="item in items track by item.id"
  class="item item-thumbnail-left"
  href="#/app/item">
  <img src="img/cactus.jpg">
  <h2>{{item.title}}</h2>
  <p>{{item.price}}</p>
  <p>{{item.detail}}</p>
</a>

cactus.jpg is 600x380.

[paulogr]

+1

[comapedrosa]

+1

[npetro]

.fit-thumbnail { object-fit: cover; }

and then add the class to your image thumbnail as a temporary fix

[comapedrosa]

Hi!
@npetro solution worked like a charm for me! Nevertheless I used a different property because of my aspect ratio. I leave you this website https://css-tricks.com/almanac/properties/o/object-fit/ where you can find and explanation and a demo of all the properties available!
Hope you like it!

[Ionitron]

Greetings @alvaromb!

I've closed this issue because my sensors indicated it was old and inactive, and may have already been fixed in recent versions of Ionic. However, if you are still experiencing this issue, please feel free to reopen this issue by creating a new one, and include any examples and other necessary information, so that we can look into it further.

Thank you for allowing me to assist you.

[shamilovtim]

This should be the stock behavior of the component. Reopening.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.