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

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

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

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

以下为具体案例:

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

image.png

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

image.png

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

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

  • 思源笔记

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

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

    18796 引用 • 70312 回帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • .protyle-wysiwyg div[data-node-id] span.img[data-type="img"] img {
    width: 110px;
    }

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

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

    1 回复
  • 其他回帖
  • 你好,这个代码片段也许可以解决你的需求。

    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 更新了该回帖
  • jxst991059

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

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

  • jxst991059 1 评论

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

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

    同步就是为了保持一致,这样可能做不到,还是需要重新想一下新的方案
    Vanessa
  • 查看全部回帖

推荐标签 标签

  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 409 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    90 引用 • 383 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • frp

    frp 是一个可用于内网穿透的高性能的反向代理应用,支持 TCP、UDP、 HTTP 和 HTTPS 协议。

    15 引用 • 7 回帖 • 2 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    11 引用 • 5 回帖 • 566 关注
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    523 引用 • 4581 回帖 • 694 关注
  • MongoDB

    MongoDB(来自于英文单词“Humongous”,中文含义为“庞大”)是一个基于分布式文件存储的数据库,由 C++ 语言编写。旨在为应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的。它支持的数据结构非常松散,是类似 JSON 的 BSON 格式,因此可以存储比较复杂的数据类型。

    90 引用 • 59 回帖 • 1 关注
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 641 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • 自由行
    3 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖
  • 30Seconds

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

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

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 686 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 602 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 619 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    45 引用 • 113 回帖 • 310 关注
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    161 引用 • 473 回帖
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 1 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    76 引用 • 390 回帖 • 1 关注
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 12 关注
  • GAE

    Google App Engine(GAE)是 Google 管理的数据中心中用于 WEB 应用程序的开发和托管的平台。2008 年 4 月 发布第一个测试版本。目前支持 Python、Java 和 Go 开发部署。全球已有数十万的开发者在其上开发了众多的应用。

    14 引用 • 42 回帖 • 687 关注
  • OnlyOffice
    4 引用 • 19 关注
  • 资讯

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

    53 引用 • 85 回帖 • 1 关注