自动将图像和图标大小与离子中的移动分辨率对齐？

Question

我是 ionic 新手。 我已经开发了一个具有一些静态内容的离子应用程序。 在浏览器中，内容是响应式的，当我构建 apk 文件并在手机中安装时，图像大小和图标非常大。 谁能告诉我在移动设备中自动对齐图像大小的可能解决方案是什么？

提前致谢。

Answer 1

抱歉回复晚了...

图片是几乎每个网站的另一个重要方面。移动用户可能不希望流式传输视频，但照片是完全不同的故事。这些也是打破盒子模型布局的最大罪魁祸首。

img { max-width: 100%; }

CSS 的标准规则是对所有图像应用 max-width 属性。由于它们将始终设置为 100%，因此您永远不会注意到失真。当用户将浏览器窗口的大小重新调整为小于您的图像可以处理的大小时，它将自动重新调整为缩小 100% 的宽度。问题是 Internet Explorer 无法理解此属性，因此您需要使用 width: 100%; 组合一个特定于 IE 的样式表。

如果您使用 JavaScript 或 jQuery 插件，也可以使用灵活的图像。有一些非常聪明的开发人员投入了时间来构建响应迅速的图像内容。 This thread 只是 Stack Overflow 中众多解决 IE6/7 错误的方法之一。

我个人建议坚持使用自然的 CSS 图像大小调整。如果您的网站在启用了 JavaScript 的移动浏览器中运行，那么它很可能也支持 CSS。如果您真的想深入挖掘，请查看这篇 24 种方式文章Images for Adaptive Designs..

Answer 2

pa1 回复很好，但我会在缩放时将其更改为保持图像比例：

img {
    max-width: 100%;
    height: auto;
}