Ionic缩略图裁剪问题：非正方形原图致缩略图变形，CSS无效果

我来帮你搞定这个缩略图变形的问题！你遇到的情况很常见——object-fit: cover没生效，是因为你把样式加在了<ion-thumbnail>容器上，而这个属性需要直接作用在<img>元素本身才行。下面给你几种可行的解决方案：

方案1：直接给img元素添加内联样式 #

把样式挪到<img>标签上，同时设置宽高为100%，让图片填满整个缩略图容器：

<ion-thumbnail item-start>
  <img src="{{item.img}}" style="width: 100%; height: 100%; object-fit: cover;">
</ion-thumbnail>

方案2：使用CSS类（更推荐，便于复用） #

在组件的CSS文件或者全局样式里定义一个类：

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

然后在HTML里给img标签应用这个类：

<ion-thumbnail item-start>
  <img src="{{item.img}}" class="thumbnail-image">
</ion-thumbnail>

方案3：固定缩略图容器尺寸（可选） #

如果需要统一缩略图的大小，可以给<ion-thumbnail>设置固定宽高，确保容器本身是正方形，再配合img的样式：

ion-thumbnail {
  width: 80px; /* 根据你的需求调整尺寸 */
  height: 80px;
}

ion-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

补充说明 #

object-fit: cover的作用是保持图片的原始比例，裁剪掉超出容器的部分，让图片刚好填满容器且不会变形。这个属性在现代浏览器和移动端环境都能很好地支持，符合Ionic的使用场景。

内容的提问来源于stack exchange，提问作者Anthea