在移动设备上更改视差横幅大小答案

【问题标题】：Change parallax banner size on mobile在移动设备上更改视差横幅大小
【发布时间】：2017-08-08 13:58:42
【问题描述】：

几个月前我在这个博客上的经历非常好，所以我希望有人能再次帮助我:)

我在 Squarespace 上开发一个网站，但遇到了移动设备上的横幅问题。这是我的网站：https://sim-zuk-zrdc.squarespace.com

我遇到的问题是横幅在移动设备上放大了太多图像，从而切断了图像的重要部分。

所以我找到了一个显示它们全尺寸的代码。但是它增加了我不想要的额外填充。这是让我走到一半的代码：

 @media only screen 
 and (max-width: 640px)
 { .image-container.content-fill { max-height: 300px; }}

如果您检查您的手机，图像现在是全尺寸的，但现在我看到了这些可怕的大空白。（我还附上图片CLICK ME）

有谁知道如何解决这个问题？ PLEAAAAAAASE :)

非常感谢您

【问题讨论】：

请帮忙！！！ :(

标签： css size parallax banner squarespace

【解决方案1】：

您使用的是Marquee template 对吗？

您在视差图像之间看到空白或条纹的原因是您只控制图像容器 <div> 的高度，而不是 <img> 本身。

Squarespace 中的content-fill 类是Squarespace 的ImageLoader YUI (javascript) 图像加载和裁剪实用程序使用的类，该实用程序可以动态调整图像大小以适合其容器。

因此，除非您打开 Squarespace 的开发者模式，否则您只能控制容器的大小，而不能控制 <img> 本身。我很确定您必须为 Marquee 的索引视图自定义模板文件，删除内容填充类并添加一个 ImageLoader 类以获得正确的移动尺寸，然后在调整窗口大小时使用 YUI/js 重新加载图像。

你使用的是开发者模式吗？

【讨论】：