html - SCSS 图像失真

Question

我有一个在浏览器中显示为圆形的圆形图像。但是，当我构建 apk 并在我的 android 手机上运行它时，图像会失真（宽度大于高度）。我如何强制它保持圆形？

我正在使用Ionic 2。

HTML：

<p class="item-selected-row search-right">
    <img class="item-stable" id="icon-image-{{subcategory.id}}" src="{{subcategory.icon}}" height="23" width="23" />
</p>

SCSS：

.item-selected-row {
    display: inline-flex;
}

.search-right {
    float: right;
}

img.item-stable {

}

Answer 1

您可以设置width和height明确，例如：

img.item-stable {
  width: 50%;
  height: 50%;
}