横幅图片默认是全屏，太大了，想缩小一些！求限制图片容器的CSS

简体中文 讨论 Shopify 设计
,

Topic summary

用户在使用 Shopify 的 DAWN 主题时遇到横幅图片全屏显示过大的问题，希望缩小图片并在两边留白。

尝试的解决方案：

  • 用户按照 ChatGPT 提供的 CSS 代码设置了容器的 max-width 和 max-height，但未能成功实现效果
  • 提供的代码中存在格式错误和乱码（部分文字反向显示）

建议的解决方案：
另一位用户 uiooo 提供了针对性的 CSS 代码：

#Banner-template--一串数字__image_banner {
  max-width: 80%;
  margin: 0 auto;
}

关键点：

  • 需要使用正确的选择器定位横幅元素（包含具体的模板 ID）
  • 通过 max-width 限制宽度，margin: 0 auto 实现居中并产生两边留白
  • 用户还提供了截图展示如何查找图片元素的位置

问题尚未确认是否解决。

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

我们用DAWN这个主题，横幅图片都是全屏就太大了，想缩小一些，两边留空白，按照chagpt给的CSS，在主题里放置了，还是不成功。

/* 限制图片容器的大小 /
.container {
max-width: 500px; / 限制容器的最大宽度 /
max-height: 300px; / 限制容器的最大高度 /
overflow: hidden; / 如果图片超出容器，隐藏超出的部分 */
}

/* 确保图片适应容器 /
.container img {
width: 100%; / 设置图片宽度为100%，让图片适应容器 /
height: auto; / 保持图片的原始比例 /
object-fit: contain; / 确保图片被缩放以适应容器，但不裁剪 */
}

2

#Banner-template–一串数字__image_banner {
max-width: 80%;
margin: 0 auto;
}

uiooo_0-1731290340462.png
uiooo_0-1731290340462.png1461×679 95 KB

一串数字,预览F12查看图片位置元素

1 Like