Atelier 主题媒体文件在M端 放大后超出了屏幕

简体中文

Topic summary

移动端使用 Atelier 主题时，媒体文件放大后超出屏幕显示范围。问题原因是图片使用了 PC 端的生成尺寸，导致在移动设备上显示过大。

解决方案：
在产品模板装修页面的 Product information - Custom CSS 中添加以下代码：

  • 针对最大宽度 768px 的屏幕（移动端）
  • 设置 drag-zoom-wrapper 最大高度为 100vh，隐藏溢出内容
  • 调整图片 object-fit 为 contain，移除最大宽高限制

此 CSS 代码可确保图片在移动端正确适配屏幕尺寸。

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Atelier 主题媒体文件在M端 放大后超出了屏幕 怎么改成不超出屏幕，我不知道应该怎么修改他的尺寸，他好像是用了PC端的生成尺寸，变得超级大

image
image554×855 61.6 KB

2

在产品模板装修页面Productinformation - Custom CSS添加以下代码

@media only screen and (max-width: 768px) {
  drag-zoom-wrapper {
    max-height: 100vh;
    overflow: hidden;
    touch-action: none;
  }
  drag-zoom-wrapper img {
    object-fit: contain !important;
    max-width: none;
    max-height: none;
  }
}