【CSS】限制特定笔记内的所有图片尺寸(并支持点击放大)

一个简单的 css,分享一下。

在笔记里有很多图片的时候,图片占用的空间过大,导致一页能显示的内容有限。
利用这个样式可以批量限制这个笔记内所有图片的大小,在需要的时候点击图片进行放大。

效果展示

应用前:

应用后:

(显示范围多了1/3!)

代码片段

点击展开 css 代码
/* 特定页面的图片限宽 */
/* 限制最大宽度为 400px */
.small-image img {
    max-width: 400px !important;
    max-height: 400px !important;
    transition: max-width 0.2s ease, transform 0.3s ease;
}

/* 第一种方法:恢复最大宽度(高度也会随之变化) */
.small-image img:active {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* 第二种方法:放大到1.5倍(高度不变) */
/* 并添加阴影 */
/* 
.small-image img:active {
    transform: scale(1.5);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
} 
*/

使用方法

  1. 把上面的 css 代码放进 CSS Snippets(样式片段)
  2. 在需要限制图片宽度的笔记里,添加元数据 cssclasses: small-image

提供了两种变换的方法,任选一种即可。
默认是第一种,需要第二种话把第一种注释掉,然后取消第二种的注释。

效果演示

第一种方法:
240829_限制笔记内的图片宽度(可点击放大)-img-240829_211749

第二种方法:
240829_限制笔记内的图片宽度(可点击放大)-img-240829_211837

主要区别在于第二种方法高度不变,下方的内容不会随之移动


另外,在阅读模式下,第二种方法会更好看些,图片会浮在文本上方:

3 个赞

拓展

对了,如果觉得点击放大效果不满意的话,也可以只用第一段:

/* 特定页面的图片限宽 */
/* 限制最大宽度为 400px */
.small-image img {
    max-width: 400px !important;
    max-height: 400px !important;
    transition: max-width 0.2s ease, transform 0.3s ease;
    margin-top: 0.5em;
}

然后配合插件 Image Toolkit 获得更好的图片放大查看体验。

1 个赞

太棒了!!!谢谢大佬!

很高兴能帮到你!

1 个赞

这个不好,需要改笔记。
国外论坛直接有一个对所有笔记编辑视图适用的版本

.markdown-source-view img, .markdown-source-view video {
    width: auto;
    height: auto;
    object-fit: contain;
    max-height: 450px;
    max-width: 825px;
    outline: 0px solid var(--text-accent);
  }
  .markdown-source-view img:hover , .markdown-source-view video:hover {
    width: 100%;
    height:100%;
    max-width: min(100%, 80vw);
    max-height: min(100%, 80vh);
    outline: none;
    cursor: zoom-in;
  }

原理差不多的,
.small-image img 是限定页面;
.markdown-source-view img, .markdown-source-view video 是针对所有文件。

我自己只在特定页面需要缩小显示,所以用前者。

总之,谢谢分享 :slightly_smiling_face: