Cargo 中文教程

网站搭建

图片 | 🛠️

详解 Cargo 平台的图片上传、管理和优化功能

Cargo 中文网用户福利

我们为中文用户整理了 Cargo 会员折扣购买方案，适合准备订阅或续费 Cargo 的用户。

查看 Cargo 会员优惠

可以通过以下几种方式添加图片：直接将图片文件从桌面拖放到页面中；拖动到顶部菜单栏的图片图标上；打开图片菜单后将图片拖入其中；或者点击“上传”按钮选择本地图片文件进行上传。

支持的图片格式包括 JPEG、PNG、GIF 和 SVG。每张图片的上传文件大小上限为25 MB。视频也可以用同样的方式添加，支持的视频格式为 MP4、MOV 和 WebM，每个视频的文件大小上限为 25 MB。（有关添加视频的详细信息，点击此处查看。）

官方原文中包含一个图片上传的视频演示。如需查看视频，可以打开 Cargo 官方的 Images 教程页面。

  • 小提示： 如果想在替换页面中的图片时保留其本地属性设置（例如链接、尺寸、边框、旋转等），可以打开图片菜单，然后将新图片拖动并按住放在要替换的图片上方。

尺寸设置

通过“站点设置”中的“图片设置”菜单，可以更改图片的默认显示方式。单个图片可以本地覆盖这些默认设置。在大多数情况下，图片的大小不会超出其容器的宽度限制。这些容器通常可以是列、图库或页面本身。

图库有其特定的布局设计，这些设计会限定图库中每张图片的特定高度或宽度。通常可以在图库设置中，或针对单张图片进行这些设定。例如，一个网格图库可能采用了三列布局，其中的图片可以设置为占据一列、两列或三列的空间。

页面和列只会限制其所包含图片的宽度，而图片的高度可以根据其宽度自由伸缩。在此基础上，可以通过图片设置来进一步调整每张图片的最大尺寸，或更改其尺寸限制方式。具体设置如下：

  • 按宽度比例缩放 (Scale by Width)
  • 设置为 100 表示图片宽度最大将缩放至其容器宽度的 100%。设置为 50 则表示图片宽度最大为容器宽度的 50%，以此类推。也可以使用不同的 CSS 单位：例如，将设置值设为 400px 时，将限制图片最大宽度为 400px（或容器宽度与 400px 中的较小值）。
  • 当需要让图片尺寸完全与容器宽度相关时，例如需要横跨整个网站的通栏页眉图片，此设置非常有用。无论浏览器窗口尺寸如何，这种尺寸缩放方式都相对可预测。
  • 按高度比例缩放 (Scale by Height)
  • 设置为 1 意味着图片高度将等于 1 个基本尺寸（即 1 rem）。这些单位与 Cargo 其他地方（例如字体大小、内边距、边框、间距和外边距设置）使用的单位相同。无论指定的高度如何，图片宽度不会超出其容器的宽度。
  • 此设置适用于需要与周围文本或设计元素保持固定比例的小尺寸图片，例如小图标、标志或内嵌图形。也可以使用不同的 CSS 单位：设置为 50% 将限制图片高度为容器宽度的 50%，设置为 80vh 将限制图片高度为浏览器视口高度的 80%。
  • 缩放以适应 (Scale to Fit)
  • 系统会为每个页面计算一个代表最大可用（不裁剪）高度的值。该值等于浏览器视口高度减去所有周围外边距、内边框、边框和固定页面的累积尺寸。例如，如果一个页面四周有 10 px 的内边距，浏览器窗口高 800 px，则该值将等于 780 px。此值固定为百分比：设置为 100 表示最大高度是该值的 100%（即 780 px），设置为 50 则是该值的 50%（即 390 px），以此类推。
  • 当希望图片无论其宽高比或容器宽度如何，都能完全适应浏览器视口时，此设置非常实用。

图片说明 (Captions)

通过图片设置菜单，可以为图片和视频添加说明 (Caption)：右键点击图片或视频，然后点击“说明...”会自动插入“Lorem ipsum...”作为占位符（一种常见的用于填充示例文本的占位符）。图片的说明样式遵循右侧菜单栏的“Aa”图标中定义的文字样式。可以为说明应用不同的文字样式，说明可以包含粗体、斜体等文字格式，以及链接。

要更改说明相对于图片或视频的位置，可以打开 CSS 编辑器（位于“站点设置”底部的 “</>” 图标），然后搜索 .caption进行修改。要更改说明在快速预览中的显示方式，请查找 .quick-view .caption。

缩放 (Zoom)

当启用“图片缩放”（在“站点设置” > “图片设置”中开启）功能后，点击图片或视频即进入缩放模式，使其最大化以适应窗口大小。缩放的大小和位置可以在“快速预览设置”（位于“默认页面设置”中）进行配置。点击此处了解更多关于快速预览的信息。可以在“图片设置”菜单中（右键点击图片，选择“禁用缩放”）针对单个图片和视频本地禁用图片缩放。当图片或视频添加了链接时，图片缩放功能将失效。要更改缩放时导航按钮的样式，可以打开 CSS 编辑器，搜索 ::part(slideshow-nav)。

滚动过渡效果 (Scroll Transition)

当启用“滚动过渡”（在“站点设置” >“图片设置”中开启）功能后，随着页面向下滚动，当图片进入视口时，会以淡入和向上移动的动画效果显示。此效果也适用于视频、图库和缩略图索引。启用此选项后，可以在“图片选项”菜单中针对单个图片或视频本地关闭此效果。

特效 (Effects)

在“站点设置”菜单中，可以针对所有图片应用一些全局“特效”，例如“边框”和“投影”。此外，还可以针对单个图片应用更多本地特效：右键点击图片，然后在图片设置菜单中点击“特效”链接，可以添加“旋转”、“闪烁”、“翻白眼”和“可拖拽”等效果。点击此处了解更多关于特效的信息。

自定义样式 (Custom Styling)

要为特定图片应用自定义样式，可以右键点击该图片，找到“HTML”选项。在这里可以添加一个 class 属性，然后在 CSS 编辑器（位于“站点设置”底部的 “</>” 图标）中通过这个类名来定位并应用样式。

例如，如果在“默认页面设置”中为所有图片添加了边框，而希望仅移除某一图片的边框，可以在 CSS 编辑器中添加如下 CSS 规则：

media-item::part(media).no-border {

    border: none;}

然后将该类添加到该图片的 HTML 代码中：

<media-item class="no-border" hash="I1370492670470899008647490175015"></media-item>