在现代网站设计中，使用全景图像可以极大地增强用户体验，特别是在建筑可视化和室内设计领域。MyLumion提供了一种便捷的方式来嵌入全景图像，使用户能够在他们自己的网站上展示这些生动的视觉效果。本文将详细介绍如何在您自己的网站上嵌入MyLumion Panorama图像，包括所需的HTML代码和步骤。
## 1. 嵌入MyLumion Panorama图像的基本步骤
### 1.1 准备工作
在开始之前，您需要确保已经在MyLumion平台上创建并保存了您的全景图像。每个全景图像都会生成一个唯一的链接编号，您需要这个编号来嵌入图像。
### 1.2 使用HTML代码嵌入图像
要将MyLumion Panorama图像嵌入到您的网站上，您需要使用以下HTML代码。只需将下划线（_______）替换为实际的链接编号，并根据需要设置宽度和高度（例如，width="640" height="360"）：
```html
```
### 1.3 替换代码中的占位符
- **链接编号**：在代码中找到“_______”，用您在MyLumion上获得的全景图像链接编号替换它。
- **宽度和高度**：根据您网站的设计需求，设置iframe的宽度和高度。确保这两个值是数字，并且用引号括起来，例如：`width="640"`和`height="360"`。
### 1.4 示例代码
假设您有一个链接编号为“123456”，并希望将宽度设置为800像素，高度设置为600像素，您的代码将如下所示：
```html
```
### 1.5 将代码添加到您的网站
将上述代码复制并粘贴到您网站的HTML文件中，确保将其放置在您希望全景图像显示的位置。保存更改后，刷新您的网站，您应该能够看到嵌入的MyLumion Panorama图像。
## 2. 注意事项
### 2.1 服务器要求
请注意，全景图像仍然需要由MyLumion服务器提供。这意味着您嵌入的全景图像和查看器不是存储在您自己的网站服务器上的资源，而是通过MyLumion的服务器进行访问。
### 2.2 兼容性
确保您的网站支持iframe标签，因为某些内容管理系统（CMS）可能会限制iframe的使用。如果您遇到问题，请检查您的CMS设置或咨询相关的技术支持。
### 2.3 响应式设计
如果您希望全景图像在不同设备上都能良好显示，可以考虑使用CSS设置iframe的响应式设计。例如，您可以使用以下CSS样式来使iframe适应父容器的宽度：
```css
#container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
height: 0;
overflow: hidden;
}
#InlineFrame1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
将这个CSS代码添加到您的样式表中，并确保iframe的HTML代码在`
## 3. 总结
通过以上步骤，您可以轻松地将MyLumion Panorama图像嵌入到自己的网站上，增强用户的视觉体验。只需简单的HTML代码和一些基本的设置，您就可以展示出色的全景图像，让访问者更好地了解您的项目。希望本文能帮助您顺利完成嵌入过程，提升网站的互动性和吸引力。
