uikit下img组件height与width属性

在使用uikit的img组件时我发现指定的height属性没有生效。width与height同时指定为100（原图为316X256）。 但在页面上实际渲染效果却只有100X81

---

于是我打开chrome的调试工具检查了样式，发现原来是UIKIT自带的样式把height指定为了auto

经过我不断的实验，最终得知height的auto值是按width的比例换算。换算下来刚好为81px。 所以只要在标签里内联一个样式指定height样式就行了style="height: 100px;"。因为css的Specificity效果，内联样式就会覆盖外联样式。嗐 也怪我学艺不精(/ω＼)

[!TIP]
最佳实践提示：
UIkit（以及许多现代响应式框架）默认将 img 设为 height: auto 主要是为了在响应式缩放时防止图片被拉伸变形。

1. 如果你希望图片保持原比例展示，推荐仅指定 width 属性，高度会自动进行按比例适配（例如这里的 100x81 才是正确的非失真尺寸）。
2. 如果因为布局需要必须强制将图片展示为 100x100，为了防止拉伸变形，建议在内联样式中同时加入 object-fit: cover，如 style="height: 100px; object-fit: cover;"。