登录 注册

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

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

这张图片右边没有块。

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

手机上：

IMG4E57C0D2FDCD1.jpeg

电脑上：

  • 思源笔记

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

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

    18823 引用 • 70454 回帖
  • Q&A

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

    6592 引用 • 29590 回帖 • 251 关注
50 悬赏
1 赞同
9 回帖
6
2
398 69 11 238 5 10 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
回帖
19
 帖子
6
 积分
1557

近期热议

推荐标签 标签

  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 23 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图（data flow graphs），用于数值计算的开源软件库。节点（Nodes）在图中表示数学操作，图中的线（edges）则表示在节点间相互联系的多维数据数组，即张量（tensor）。

    20 引用 • 19 回帖 • 3 关注
  • Scala

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

    13 引用 • 11 回帖 • 109 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC（苹果开发者大会）发布的开发语言，可与 Objective-C 共同运行于 Mac OS 和 iOS 平台，用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 498 关注
  • Chrome

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

    60 引用 • 287 回帖 • 1 关注
  • Jenkins

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

    51 引用 • 37 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖
  • Kotlin

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

    19 引用 • 33 回帖 • 29 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和，范畴较广，一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    228 引用 • 1450 回帖 • 1 关注
  • 工具

    子曰：“工欲善其事，必先利其器。”

    276 引用 • 685 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发，前端设计可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1347 回帖
  • RabbitMQ

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

    49 引用 • 60 回帖 • 394 关注
  • etcd

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

    5 引用 • 26 回帖 • 495 关注
  • 开源

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

    397 引用 • 3416 回帖
  • 数据库

    据说 99% 的性能瓶颈都在数据库。

    330 引用 • 614 回帖
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统，它完整实现了 JMS 规范，是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 626 关注
  • flomo

    flomo 是新一代 「卡片笔记」 ，专注在碎片化时代，促进你的记录，帮你积累更多知识资产。

    3 引用 • 82 回帖 • 1 关注
  • frp

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

    15 引用 • 7 回帖
  • API

    应用程序编程接口（Application Programming Interface）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

    76 引用 • 421 回帖
  • B3log

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

    1083 引用 • 3461 回帖 • 286 关注
  • AngularJS

    AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，后为 Google 所收购。是一款优秀的前端 JS 框架，已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等。2.0 版本后已经改名为 Angular。

    12 引用 • 50 回帖 • 427 关注
  • 心情

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

    59 引用 • 369 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据（或者事件）流的 API。它组合了观察者模式，迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 126 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 163 关注
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件，打造你得心应手的工具集合。

    5 引用 • 13 回帖 • 2 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器，可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API，可通过 DOM，CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 462 关注
  • JVM

    JVM（Java Virtual Machine）Java 虚拟机是一个微型操作系统，有自己的硬件构架体系，还有相应的指令系统。能够识别 Java 独特的 .class 文件（字节码），能够将这些文件中的信息读取出来，使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖

最新标签