如何在Mendix文档模板中调整图片尺寸避免内容重叠？

下面是几种通过文档模板调整图片尺寸、避免重叠的实用方法：

方法1：直接设置图片的相对宽度 #

• 打开目标文档模板，选中要调整的图片组件
• 在属性面板的「宽度」选项中，放弃固定像素值，改用百分比单位（比如设置为48%）。两个并排图片各占48%，剩下的4%作为间距，就能避免重叠
• 可选：同时设置「最大宽度」（比如500px），防止图片在大尺寸容器里过度拉伸

方法2：给容器添加自定义样式约束图片 #

• 选中存放图片的容器，在「样式」字段添加自定义类名，比如image-wrapper
• 在文档模板的「自定义样式」区域（模板编辑界面的样式标签页）插入以下CSS代码：

.image-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

这段代码会强制图片自适应容器宽度，同时保持宽高比，不会超出容器边界

方法3：优化容器的布局规则 #

• 确保两个图片容器的父容器使用Flex布局：
  1. 选中父容器，在布局设置里选择Flex
  2. 给父容器设置「justify-content: space-between」或「gap: 10px」来控制子容器的间距
  3. 给每个子容器设置「flex: 1」，让它们平分父容器的可用宽度
• 这种布局下，容器会自动分配宽度，图片在容器内自适应缩放，从根源避免跨容器重叠

额外注意事项 #

• 不要给图片设置固定的宽高值，优先使用相对单位（百分比、vw等）
• 如果图片是从实体关联的属性中加载的，确保实体属性没有强制固定图片尺寸，否则会覆盖文档模板的设置

内容的提问来源于stack exchange，提问作者Dmytro Kovach