登录 注册

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

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

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

这张图片右边没有块。

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

手机上：

IMG4E57C0D2FDCD1.jpeg

电脑上：

  • 思源笔记

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

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

    22338 引用 • 89384 回帖
  • Q&A

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

    8112 引用 • 37003 回帖 • 160 关注
50 悬赏
1 赞同
9 回帖
6
2
587 78 11 407 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
回帖
39
 帖子
9
 积分
4961

近期热议

推荐标签 标签

  • 人工智能

    人工智能（Artificial Intelligence）是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    132 引用 • 189 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区，可将文章作为帖子推送到社区，来自社区的回帖将作为博客评论进行联动（具体细节请浏览 B3log 构思 - 分布式社区网络）。

    这是一种全新的网络社区体验，让热爱记录和分享的你不再感到孤单！

    132 引用 • 1114 回帖 • 124 关注
  • 百度

    百度（Nasdaq：BIDU）是全球最大的中文搜索引擎、最大的中文网站。2000 年 1 月由李彦宏创立于北京中关村，致力于向人们提供“简单，可依赖”的信息获取方式。“百度”二字源于中国宋朝词人辛弃疾的《青玉案·元夕》词句“众里寻他千百度”，象征着百度对中文信息检索技术的执著追求。

    63 引用 • 785 回帖 • 175 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Kafka

    Kafka 是一种高吞吐量的分布式发布订阅消息系统，它可以处理消费者规模的网站中的所有动作流数据。 这种动作（网页浏览，搜索和其他用户的行动）是现代系统中许多功能的基础。 这些数据通常是由于吞吐量的要求而通过处理日志和日志聚合来解决。

    36 引用 • 35 回帖
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 9 关注
  • Mobi.css

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

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

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

    1 引用 • 210 关注
  • Oracle

    Oracle（甲骨文）公司，全称甲骨文股份有限公司（甲骨文软件系统有限公司），是全球最大的企业级软件公司，总部位于美国加利福尼亚州的红木滩。1989 年正式进入中国市场。2013 年，甲骨文已超越 IBM，成为继 Microsoft 后全球第二大软件公司。

    105 引用 • 127 回帖 • 382 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念，推广开源项目，为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • BAE

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

    19 引用 • 75 回帖 • 642 关注
  • 机器学习

    机器学习（Machine Learning）是一门多领域交叉学科，涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为，以获取新的知识或技能，重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖 • 1 关注
  • Love2D

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

    14 引用 • 53 回帖 • 531 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用，而且功能强大。你无需专门学习，只需看上几眼，就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 611 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织，“用爱发电”象征开源与贡献精神，加入组织，代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入：用爱发电组织邀请帖。
    用爱发电组织官网：https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力：

    • 遵守开源守则，体现开源&贡献精神：以分享为目的，拒绝非法牟利。
    • 自我保护：使用适当的 License 保护自己的原创作品。
    • 尊重他人：不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露；以礼相待，尊重所有对社区做出贡献的开发者；通过他人的分享习得知识，要留下足迹，表示感谢。
    • 热爱编程、热爱学习：加入组织，热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友，也同样欢迎默默成就的朋友。
    • 倾听：正确并恳切对待、处理问题与建议，及时修复开源项目的 Bug ，及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视：不诋毁、轻视、嘲讽其他开发者，主动提出建议、施以帮助，以和谐为本。只要他人肯努力，你也可能会被昔日小看的人所超越，所以请保持谦虚。
    • 乐观且活跃：你的努力决定了你的高度。不要放弃，多年后回头俯瞰，才会发现自己已经成就往日所仰望的水平。积极地将项目开源，帮助他人学习、改进，自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢？

    26 引用 • 232 回帖 • 2 关注
  • gRpc
    11 引用 • 9 回帖 • 73 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖 • 43 关注
  • 以太坊

    以太坊（Ethereum）并不是一个机构，而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity，使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物：投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖
  • Swift

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

    36 引用 • 37 回帖 • 529 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具，它能把各种资源，例如 JS、CSS（less/sass）、图片等都作为模块来使用和处理。

    41 引用 • 130 回帖 • 261 关注
  • 坑

    一些有用的避坑指南。

    69 引用 • 93 回帖
  • CongSec

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

    1 引用 • 1 回帖 • 9 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台，致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验，及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • NGINX

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

    311 引用 • 546 回帖

最新标签