登录 注册

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

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

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

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

以下为具体案例：

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

image.png

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

image.png

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

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

  • 思源笔记

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

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

    22020 引用 • 87823 回帖 • 3 关注
11 回帖
3
2
2
2
847 116 16 622 5 7 80

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • wenbocn •
    订阅者 付费者

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

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

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

    1 回复
  • jxst991059 •
    付费者 作者

    请问这个代码要加到哪里呢？

    1 回复
  • wenbocn •
    订阅者 付费者

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

    1 回复
  • pth2000 •
    付费者

    最近在编辑多图笔记时有同样的体会，不太方便

  • Vanessa •
    订阅者 付费者 MOD

    这个目前还没想到优化的方案，如果把 33% 在移动端移除，那么用户在移动端设置百分比宽度就无法看到效果。

    2 回复
  • jxst991059 •
    付费者 作者

    感谢提供此代码，但是仍然不够灵活，无法兼顾大图和小图的显示尺寸

    ，这个代码适合在手机上用，但是手机端的设置中没有“代码片段”这个选项。

  • Yylicon • • 1 评论
    订阅者 付费者

    移动端编辑器宽度能否再宽一些，本身手机屏幕比较窄，现在块标挤占位置导致两边空白太多了，阅读体验不是很好

    可以看下对比其他软件手机端，右边是思源，明显阅读面积很窄
    image.png

    1 回复
    1 操作
    Yylicon 在 2023-08-31 17:17:44 更新了该回帖
    左右需要放置块标和滚动条
    Vanessa •
  • jxst991059 • • 1 评论
    付费者 作者

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

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

    同步就是为了保持一致，这样可能做不到，还是需要重新想一下新的方案
    Vanessa •
  • mdzz2048 •
    订阅者 付费者 恶龙

    你好，这个代码片段也许可以解决你的需求。

    body:has(#sidebar) > #editor .protyle-content > .protyle-wysiwyg {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

    显示效果：

    image.png

    注意移除所有边距后，点击最左侧的块，不会出现块标

    1 回复
    1 操作
    mdzz2048 在 2023-09-02 00:17:22 更新了该回帖
  • Yylicon •
    订阅者 付费者

    感谢大佬，我的好像没生效，这个是只针对手机端吗，不知道是不是手机系统的问题还是啥

    1 回复
  • mdzz2048 •
    订阅者 付费者 恶龙

    只针对手机端

请输入回帖内容 ...
jxst991059
回帖
20
 帖子
24
 积分
312

近期热议

推荐标签 标签

  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖 • 2 关注
  • 负能量

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

    88 引用 • 1235 回帖 • 408 关注
  • QQ

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

    45 引用 • 557 回帖 • 84 关注
  • 脑图

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

    25 引用 • 83 回帖
  • OpenStack

    OpenStack 是一个云操作系统，通过数据中心可控制大型的计算、存储、网络等资源池。所有的管理通过前端界面管理员就可以完成，同样也可以通过 Web 接口让最终用户部署资源。

    10 引用 • 2 关注
  • 正则表达式

    正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • HBase

    HBase 是一个分布式的、面向列的开源数据库，该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable：一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样，HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • Docker

    Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的操作系统上。容器完全使用沙箱机制，几乎没有性能开销，可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 1 关注
  • Scala

    Scala 是一门多范式的编程语言，集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 124 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 663 关注
  • SMTP

    SMTP（Simple Mail Transfer Protocol）即简单邮件传输协议，它是一组用于由源地址到目的地址传送邮件的规则，由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇，它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 612 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架，基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 387 关注
  • 禅道

    禅道是一款国产的开源项目管理软件，她的核心管理思想基于敏捷方法 scrum，内置了产品管理和项目管理，同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能，在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来，完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 127 关注
  • OpenResty

    OpenResty 是一个基于 NGINX 与 Lua 的高性能 Web 平台，其内部集成了大量精良的 Lua 库、第三方模块以及大多数的依赖项。用于方便地搭建能够处理超高并发、扩展性极高的动态 Web 应用、Web 服务和动态网关。

    17 引用 • 47 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构，这是有关软件整体结构与组件的抽象描述，用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息，资讯有时效性和地域性。

    55 引用 • 85 回帖
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 816 回帖 • 1 关注
  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 383 回帖 • 6 关注
  • 新人

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

    52 引用 • 228 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖 • 2 关注
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 706 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架，使用 Node.js 编写。

    21 引用 • 140 回帖 • 5 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现，服务器端用 Erlang 语言编写，支持多种语言客户端，如：Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息，在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 366 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商，致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景，七牛先后推出了对象存储，融合 CDN 加速，数据通用处理，内容反垃圾服务，以及直播云服务等。

    26 引用 • 222 回帖 • 164 关注
  • Google

    Google（Google Inc.，NASDAQ：GOOG）是一家美国上市公司（公有股份公司），于 1998 年 9 月 7 日以私有股份公司的形式创立，设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”，它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎，它提供了简单易用的免费服务。不作恶（Don't be evil）是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖

最新标签