登录 注册

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

本贴最后更新于 385 天前，其中的信息可能已经渤澥桑田

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

这张图片右边没有块。

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

手机上：

IMG4E57C0D2FDCD1.jpeg

电脑上：

  • 思源笔记

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

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

    23020 引用 • 92599 回帖
  • Q&A

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

    8449 引用 • 38491 回帖 • 155 关注
50 悬赏
1 赞同
9 回帖
6
2
605 80 11 423 13 12 57

相关帖子

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

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • Elystraw •
    订阅者 作者

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

    CleanShot20231203at19.03.29.png

  • Elystraw •
    订阅者 作者

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

    所有出现问题的图片在 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;
}

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

  • Elystraw •
    订阅者 作者

    CleanShot20231203at20.44.33.png

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

  • Vanessa •
    订阅者 付费者 MOD

    是不是 PC 端设置过宽度？

    2 回复
  • Elystraw •
    订阅者 作者

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

  • Elystraw • • 2 评论
    订阅者 作者

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

    1 回复
    非常抱歉，这个应该是以前版本的遗留问题。可以直接修改 .sy 文件后点击重建索引试试。
    Vanessa •
    @Vanessa 修改 .sy 文件是指怎么操作呢？要一个一个去修改吗？
    Elystraw •
  • zxhd86 •
    订阅者 先知

    可能性挺多的，我记得之前有个版本设置图片下面的提示文本会设置一个 style，这么多个版本过去，也不知道哪个版本会为解决什么问题而执行一些奇怪的操作了。

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

    1 回复
  • Elystraw •
    订阅者 作者

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

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

  • Vanessa •
    订阅者 付费者 MOD

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

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

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

请输入回帖内容 ...
Elystraw
回帖
43
 帖子
10
 积分
5324

近期热议

推荐标签 标签

  • 房星科技

    房星网，我们不和没有钱的程序员谈理想，我们要让程序员又有理想又有钱。我们有雄厚的房地产行业线下资源，遍布昆明全城的 100 家门店、四千地产经纪人是我们坚实的后盾。

    6 引用 • 141 回帖 • 584 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 1 关注
  • Google

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

    49 引用 • 192 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎，它支持自动化部署、大规模可伸缩、应用容器化管理。

    110 引用 • 54 回帖 • 1 关注
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    167 引用 • 1520 回帖
  • 学习

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

    171 引用 • 512 回帖
  • 区块链

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

    91 引用 • 751 回帖 • 1 关注
  • Vim

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

    29 引用 • 66 回帖 • 2 关注
  • 资讯

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

    55 引用 • 85 回帖
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣，为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 50 关注
  • 开源

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

    407 引用 • 3578 回帖
  • BND

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

    107 引用 • 1281 回帖 • 34 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 15 关注
  • 单点登录

    单点登录（Single Sign On）是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖
  • 链滴

    链滴是一个记录生活的地方。

    记录生活，连接点滴

    156 引用 • 3792 回帖
  • Hadoop

    Hadoop 是由 Apache 基金会所开发的一个分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。

    86 引用 • 122 回帖 • 626 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议，它实现了浏览器与服务器之间的全双工通信（full-duplex）。

    48 引用 • 206 回帖 • 317 关注
  • Hibernate

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

    39 引用 • 103 回帖 • 715 关注
  • Wide

    Wide 是一款基于 Web 的 Go 语言 IDE。通过浏览器就可以进行 Go 开发，并有代码自动完成、查看表达式、编译反馈、Lint、实时结果输出等功能。

    欢迎访问我们运维的实例： https://wide.b3log.org

    30 引用 • 218 回帖 • 635 关注
  • Sym

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

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

    524 引用 • 4601 回帖 • 699 关注
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • ngrok

    ngrok 是一个反向代理，通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 626 关注
  • 倾城之链
    23 引用 • 66 回帖 • 138 关注
  • NGINX

    NGINX 是一个高性能的 HTTP 和反向代理服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 NGINX 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本 0.1.0 发布于 2004 年 10 月 4 日。

    313 引用 • 547 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言，由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码，也可以编译成 JavaScript，方便在没有 JVM 的设备上运行。在 Google I/O 2017 中，Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 63 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起，它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • Mobi.css

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

    1 引用 • 6 回帖 • 745 关注

最新标签