不同分辨率app启动广告图片尺寸拉伸变形,不拉伸边缘溢出如何解决?
react-native 的 resizeMode
, 也类似css 的 object-fit
- 如果设置成
cover
, 那么在屏幕特别长的机型,左右会溢出看不到
- 如果设置成
stretch
, 么部分分辨率会拉伸变形
- 如果设置成
contain
, 那么部分分辨率会上下留白
那么如何优雅的解决这个问题呢?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
最优雅的通用做法,莫过于从设计上就解决问题:把广告图分为内容和背景(或底纹),内容始终处于屏幕上最显眼的位置,背景或底纹则填充整个屏幕。
略次一点的通用做法是不考虑太长的屏幕和横屏,然后图的主体内容略小一点处于中间位置,填充模式选择“cover”。
-----------------
如果是
html
的话有picture
标签可用,或者使用css
媒体查询换背景也可以。