图像

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

在这节课中:

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

添加图片

有4种方法可以将图片添加到Webflow项目中:

1. 从Elements面板
2. 从资产面板
3. 从你的电脑
4. 从快速查找搜索

了解更多关于在web上使用的最常见的图像文件类型．

从Elements面板

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

从资产面板

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

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

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

了解更多关于如何添加图像到资产面板．

从你的电脑

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

很高兴知道

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

图片的最大文件大小为4MB。

故障处理—上传失败

如果你在上传图片时收到“上传失败”的警告，请检查以下内容:

• 图像文件:确保映像文件没有损坏，具有正确的和支持的文件扩展名，并且不大于4MB
• 检查网络连接:你应该能够在网速较慢的情况下上传图片(至少5mbps)。为了确保网速不是问题，再次检查你的网络连接，确认你的信号强度。排除网络连接故障．
• 检查浏览器扩展:当上传图片到Webflow Designer时，一些浏览器扩展可能会导致问题。排除浏览器扩展的故障．

从快速查找搜索

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

编辑图片设置

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

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

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

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

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

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

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

HiDPI当勾选此项时，该设置将使图像的像素宽度减半。一个600px宽的图像，会显示为300px宽。这个像素密度将确保图像在大多数有HiDPI显示的移动设备上看起来很棒。

替换图片

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

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

风格的图片

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

有些样式选项并不适用于背景样式等图像。要使用图像叠加，可以使用背景图像。

使用类对图像进行样式设计可以极大地节省时间。它允许您将一个类应用于多个图像。编辑该类将影响该类中的所有图像。当通过样式面板和设置面板指定大小时，这尤其有用。使用类，您可以避免在将每个图像添加到项目时手动设置它们的大小。

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

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

阴影你可以让你的图片看起来像从页面中弹出一样。

过滤器:您可以使用不同的过滤器，如模糊，灰度，或sepia。

添加alt属性

Alt属性用于替代文本出现时，由于某些原因，一个图像没有加载到您的页面。它可以是图像的简短描述。这不仅对可访问性有帮助，而且对搜索引擎确定图像的内容也有帮助。

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

动态的alt属性

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

设置这些图像的动态alt文本:

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