希望优化一下手机端的图片显示比例

本贴最后更新于 637 天前,其中的信息可能已经事过境迁

目前的问题:对于尺寸过大的图片,在电脑端对图片设置好固定的宽度比例后(如缩小至 xx% 宽度),在手机端查看时图片会显得过小,因为图片被严格地限制在了 xx% 宽度。如果将宽度调回 100%,在电脑端又会显得过大,如果缩小图片本身的尺寸又会损失清晰度,而且操作非常繁琐。总的来说就是电脑端排版、手机端排版、图片清晰度无法做到兼顾。

希望做出的优化:对手机端专门优化图片的显示宽度,虽然图片在笔记中设定了 xx% 宽度的固有参数,但是为了便于阅读,希望图片在手机端可以突破这个固有参数的限制而又不改变这个固有参数,让图片宽度充满手机屏幕的宽度,尺寸本来就较小的图片除外。

以下为具体案例:

在电脑端编辑笔记时,通常会将尺寸过大的图片缩小到合适的比例(如 33% 宽度),如下图:

image.png

但是在手机端查看这篇笔记时,图片还是被严格缩放至手机屏幕宽度的 33%,这样就会显得非常小,不便于手机阅读。如下图:

image.png

而这张图片在小米社区手机端的原帖上是这样排版的:

https://web.vip.miui.com/page/info/mio/mio/suggestDetail?postId=37941772image.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    25713 引用 • 106383 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • jxst991059 1 评论

    我也在考虑优化方案,说说我最近的使用感受:

    设置图片的宽度比例主要是用于在电脑端手动优化笔记排版,让电脑端达到最佳排版效果。而也恰恰是因为把电脑端的比例同步到了手机端,才降低了手机端的阅读体验,试想一下,电脑端的屏幕很宽,最少也有 1920 像素,而手机端通常为 1080 像素,1.33K 的屏幕宽 1440 像素,如果手机端仍然执行电脑端的比例,基准宽度绝对值变小了,那么必然导致用户在手机端看到的图片都缩小了,体验肯定不好。所以我认为手机端有必要执行自己的一套图片比例设定,和电脑端互相独立,双轨制,也就是每张图片都带有两个比例参数:电脑端的和手机端的。在电脑端新添加的图片同步到手机端时,图片均以“默认”宽度显示;在手机端添加的图片同步到电脑端时,同理也以“默认”宽度显示。而为了照顾老的使用习惯,手机端也可以保留“以电脑端设置过的比例显示图片”的选项。

    同步就是为了保持一致,这样可能做不到,还是需要重新想一下新的方案
    Vanessa
  • 其他回帖
  • 这个目前还没想到优化的方案,如果把 33% 在移动端移除,那么用户在移动端设置百分比宽度就无法看到效果。

    2 回复
  • wenbocn

    设置,外观,代码片段,注意每个代码片段右边有一个启用选项,默认是关闭的

    1 回复
  • wenbocn

    .protyle-wysiwyg div[data-node-id] span.img[data-type="img"] img {
    width: 110px;
    }

    这个代码可能会满足你的要求,来自 @iamqiz 大神。

    建议提供一种限制图片插入时默认尺寸的设置 - 链滴 (ld246.com)

    1 回复
  • 查看全部回帖

推荐标签 标签

  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    37 引用 • 157 回帖 • 2 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 107 关注
  • Firefox

    Mozilla Firefox 中文俗称“火狐”(正式缩写为 Fx 或 fx,非正式缩写为 FF),是一个开源的网页浏览器,使用 Gecko 排版引擎,支持多种操作系统,如 Windows、OSX 及 Linux 等。

    7 引用 • 30 回帖 • 385 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 34 关注
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    413 引用 • 3588 回帖
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖 • 3 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 78 回帖 • 678 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 184 关注
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 116 关注
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • 工具

    子曰:“工欲善其事,必先利其器。”

    298 引用 • 763 回帖 • 1 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1063 引用 • 3455 回帖 • 154 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    32 引用 • 99 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 315 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 4 关注
  • sts
    2 引用 • 2 回帖 • 234 关注
  • 微软

    微软是一家美国跨国科技公司,也是世界 PC 软件开发的先导,由比尔·盖茨与保罗·艾伦创办于 1975 年,公司总部设立在华盛顿州的雷德蒙德(Redmond,邻近西雅图)。以研发、制造、授权和提供广泛的电脑软件服务业务为主。

    8 引用 • 44 回帖 • 1 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1251 回帖 • 399 关注
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 222 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    52 引用 • 228 回帖
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 249 关注