有没有小伙伴遇到图片宽度显示不正常的

今天无意中发现之前有一篇笔记图片显示不正常,这张图片在手机上宽度超出屏幕了,在电脑上又无法拉宽。调节宽度那些选项试过了,没有用。

这张图片右边没有块。

图片复制到另外一行是可以正常缩放的,也就是不影响使用。但仍然好奇这个问题怎么出现的。

手机上:

IMG4E57C0D2FDCD1.jpeg

电脑上:

  • 思源笔记

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

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

    17452 引用 • 63302 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    6142 引用 • 27537 回帖 • 276 关注

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • rayhsu

    TEST.sy.zip
    我把那个有问题的图片块复制到一个新的测试文档里面,还是不能缩放。我为这篇测试文档导出了思源格式的压缩包,有空的小伙伴帮我看一下是否可以缩放,不知道能不能复现问题。

    CleanShot20231203at19.03.29.png

  • rayhsu

    又检查了一遍,发现我的很多笔记中的图片都出现了这个问题,出现问题的文档中有部分图片是正常的。

    所有出现问题的图片在 PC 端都无法拉宽,在移动端显示超出右侧边界。

    几乎每张图片我都手动调整过宽度。

    备注一下,我不使用任何第三方主题,自定义的 CSS 代码如下:

    .protyle-title.protyle-wysiwyg--attr .protyle-title__input, .protyle-wysiwyg .h1, .protyle-wysiwyg .h2, .protyle-wysiwyg .h3, .protyle-wysiwyg .h4, .protyle-wysiwyg .h5, .protyle-wysiwyg .h6 {
      color: #F9B536;
    }
    
    .protyle-wysiwyg .p[data-type~=NodeParagraph] {
      color: #F6F7EE;
      font-weight: 500;
    }
    
    .protyle-wysiwyg span[data-type~=strong] {
      color: pink;
    }
    
    .protyle-wysiwyg .hljs {
      padding-left: 20px;
    }
    
    .protyle-scroll {
      display: none;
    }
    

    我试图新建文档插入一些图片缩放,但暂时复现不了这个问题。郁闷......

  • rayhsu

    CleanShot20231203at20.44.33.png

    应该是这个内联的以 px 为单位的 max-width 导致的,好奇这个样式什么时候会添加到元素上去?

  • 是不是 PC 端设置过宽度?

    2 回复
  • rayhsu

    是的,几乎每一张图片我都会拖动调整一下宽度 😂

  • rayhsu 2 评论

    找了个图片试了一下,拖动调整宽度似乎只会添加一个 width 属性,那这个 max-width 是怎么出现的?

    1 回复
    非常抱歉,这个应该是以前版本的遗留问题。可以直接修改 .sy 文件后点击重建索引试试。
    Vanessa
    @Vanessa 修改 .sy 文件是指怎么操作呢?要一个一个去修改吗?
    rayhsu
  • 可能性挺多的,我记得之前有个版本设置图片下面的提示文本会设置一个 style,这么多个版本过去,也不知道哪个版本会为解决什么问题而执行一些奇怪的操作了。

    最终的解决方案还是需要图片调整操作能适配更多的情况,起码要清除 width、height 的全部属性。

    1 回复
  • rayhsu

    是的吧,郁闷。不知道问题怎么出现的,所以也就不知道下次如何避免。

    现在希望这个问题能被修复,还有怎么方便清除之前这些问题图片上的多余属性,笔记中的图片实在有点多,一个个打开开发者工具删除太麻烦了。

  • 找到 NodeImage 中的 max-width 移除即可。

    "Type": "NodeImage",
    "Data": "span",
    "Properties": {
    	"parent-style": "width: 250px;max-width: 200px;",
    	"style": "width: 240px;"
    },
    

    可以用先修改一个测试下,然后批量替换。

请输入回帖内容 ...

推荐标签 标签

  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 685 关注
  • Openfire

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

    6 引用 • 7 回帖 • 81 关注
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 3 关注
  • 工具

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

    273 引用 • 675 回帖
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 21 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 4 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 587 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 306 关注
  • 笔记

    好记性不如烂笔头。

    303 引用 • 777 回帖
  • 创业

    你比 99% 的人都优秀么?

    82 引用 • 1397 回帖 • 1 关注
  • Sym

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

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

    522 引用 • 4581 回帖 • 682 关注
  • 思源笔记

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

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

    17452 引用 • 63301 回帖
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    167 引用 • 799 回帖 • 2 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • SMTP

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

    4 引用 • 18 回帖 • 574 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    27 引用 • 66 回帖 • 2 关注
  • Vditor

    Vditor 是一款浏览器端的 Markdown 编辑器,支持所见即所得、即时渲染(类似 Typora)和分屏预览模式。它使用 TypeScript 实现,支持原生 JavaScript、Vue、React 和 Angular。

    301 引用 • 1622 回帖 • 2 关注
  • PWA

    PWA(Progressive Web App)是 Google 在 2015 年提出、2016 年 6 月开始推广的项目。它结合了一系列现代 Web 技术,在网页应用中实现和原生应用相近的用户体验。

    14 引用 • 69 回帖 • 114 关注
  • V2Ray
    1 引用 • 15 回帖 • 1 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 494 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    213 引用 • 462 回帖
  • CloudFoundry

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

    5 引用 • 18 回帖 • 142 关注
  • 尊园地产

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

    1 引用 • 22 回帖 • 658 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    82 引用 • 893 回帖
  • Sphinx

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

    1 引用 • 175 关注
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 476 关注