> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 在落地页中添加和设置图片

> 在落地页中添加和替换图片：从图库上传或选用 Unsplash 图片，设置 Fill、Fit 等适配方式，调整位置、尺寸并裁剪图片。

Image 元素用来向页面添加视觉内容，比如产品图、插图或背景图。

从左侧边栏拖放即可添加，并且可以完全控制图片的外观和表现。

## 添加与替换图片

* 在右侧面板点击 **Change Image**
* 会打开图库弹窗

在图库中你可以：

* 从已上传的图片中选择
* 上传新图片
* 浏览 Unsplash 的图片

## 图片尺寸选项

你可以控制图片在容器内的适配方式：

* **Fill**：填满整个区域（可能裁掉部分内容）
* **Fit**：完整显示图片，不裁切
* **Stretch**：拉伸以匹配容器尺寸
* **Original**：保持图片原始尺寸

## 调整图片位置

选中图片后，可以调整它在容器内的显示位置。

* 用 **位置控件（中间的圆点）** 移动可见区域
* 示例：<br />如果图片被裁切了，可以把焦点上移，让画面显示人脸而不是背景

## 图片尺寸

* 手动控制宽度和高度
* 根据布局需要使用 % 或 px

## 管理你的图片

你可以在图库中管理全部图片资源：

* 访问所有已上传的图片
* 整理并复用素材
* 随时上传新文件

## 裁剪图片

在图库中，图片使用前可以先裁剪：

* 选择一张图片
* 打开裁剪工具
* 选择比例（1:1、16:9 等）
* 应用裁剪

## 最佳实践

* 使用经过优化的图片，加载更快
* 各 section 中的图片尺寸保持一致
* 根据布局需要选用 Fit 或 Fill


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.