图像

图像元素是可以放到页面上的图像或图像占位符。你可以将它移动到任何独立于其他元素的地方。图像元素与a不同背景图像这是在另一个元素上设置的，比如section或div块。

在这节课中:

1. 添加图像元素
2. 编辑图像设置
3. 替换图片
4. 风格的图片
5. 添加alt属性

添加图片

有4种方法可以添加图像到你的Webflow项目:

1. 从元素面板
2. 来自Assets面板
3. 从你的电脑
4. 从快速查找搜索

此网页提供更多有关网上最常见的影像档案类型的资料．

从元素面板

要向页面添加新图像，只需拖放一个图像元素中的元素面板．要选择或添加图像，请单击进入资产面板并点击选择图像或上传．

来自Assets面板

将图像上传到Asset面板后，将图像拖到画布上。

你可以通过两种方式上传图片到Assets面板:

1. 点击上传在资产面板并选择要上传的图片
2. 拖放图片从你的电脑进入资产面板

了解更多关于如何向资产面板添加图像的信息．

从你的电脑

拖一个图像从你的电脑上到你的画布上，把它放在你想要的地方。

很高兴知道

Webflow创建响应变量当你上传图片到资产面板时。但是，最好在上传到Webflow之前优化你的图片。阅读更多关于图像分辨率的信息．

图像的最大文件大小是4MB。

故障处理-上传失败

如果你在上传图片时出现“上传失败”的提示，请检查以下内容:

• 图像文件:确保映像文件没有损坏，具有正确和支持的文件扩展名，且不超过4MB
• 检查互联网连接:即使网速较慢(最低5mbps)，你也能上传图片。为了确保网速不是问题，要反复检查你的网络连接，并确认信号强度。排除互联网连接故障．
• 检查浏览器扩展:有些浏览器扩展可能会导致上传图片到Webflow设计器时出现问题。排查我的浏览器扩展．

从快速查找搜索

快速的找到是Webflow设计器中的一个功能强大的搜索栏。这是一个助手，将帮助您加快您的工作流程和提高您的效率，因为您创建您的项目-它只是CMD+E / CTRL+E的距离。

编辑图像设置

选择图像元素后，你可以通过4种方式访问图像设置:

1. 双击图像元素
2. 按回车键
3. 单击图像元素标签旁边的齿轮图标
4. 按D键或进入设置面板

选择图片:您可以将占位符替换为资产面板中的任何图像。只需双击元素并单击选择图像从出现的Settings面板。

大小:您可以指定像素值的宽度或高度。这将为所有断点设置图像大小，但可以通过在元素样式面板中设置宽度和高度来覆盖这些值。

在图像设置中设置宽度/高度将应用于所有设备上的图像断点．但是，您可以通过样式面板为图像设置不同的宽度/高度设置。

你也可以抓取图像的角落并拖动来调整它的大小。

注意，当您调整图像的大小时，它不会比它的父元素更大。

HiDPI:勾选时，此设置将设置您的图像在其像素宽度的一半。所以一个600px宽的图像，将以300px显示。这种像素密度将确保图像在大多数具有HiDPI显示器的移动设备上看起来很好。

替换图片

在您将图像添加到画布上之后，您可以随时替换它。

1. 打开图像设置。
2. 单击替换图片按钮。这将打开资产面板。
3. 选择一个现有的图像或上传一个新的图像。

风格的图片

您可以使用样式面板为图像设置样式，就像使用任何其他元素一样。

一些样式选项不适用于图像，如背景样式。要使用图像叠加，可以使用背景图像代替。

使用类为图像设置样式可以节省大量时间。它允许您将一个类应用于多个图像。编辑该类将影响所有与该类相关的图像。这在通过样式面板和设置面板指定大小时特别有用。通过使用类，您可以避免在将每个图像添加到项目时手动设置它们的大小。

这里有一些你可以用来赋予你的图像特征的样式属性:

边界半径:您可以在一个或多个角上设置圆角。

阴影:你可以让你的图片看起来像弹出了页面。

过滤器:你可以使用不同的滤镜，如模糊，灰度，或暗色。

添加alt属性

Alt属性用于在由于某种原因图片没有加载到页面上时出现的替代文本。它可以是图像的简要描述。这不仅有助于图像的可访问性，也有助于搜索引擎确定图像的内容。

您可以从设置面板中为每个图像指定一个Alt属性。

动态alt属性

图像元素可以在动态列表和动态模板页面中使用。了解关于CMS Image字段的更多信息。

为这些图片设置一个动态alt文本:

1. 选择图像
2. 去设置选项卡
3. 下图像属性,请检查获取alt文本
4. 选择包含图像alt文本的字段