FROM CACHE - zh-cn_header
此社区已转向点对点支持。Shopify 支持团队将不再为此社区提供服务。我们建议您与其他商家和合作伙伴建立联系以获取帮助,并分享您的经验! 如发现有任何违反我们行为准则的行为或您希望删除的内容,欢迎继续举报。

社区即将迁移!从 7月7日 开始,当前社区将进入只读状态,持续约两周。期间您仍可浏览内容,但暂时无法使用发布功能。详细了解

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

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

HeHGE
访客
1 0 0

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

 

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

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

1 条回复1

uiooo
Shopify Partner
160 14 19

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

uiooo_0-1731290340462.png

 

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

ZunDuJiaDu