変更視差バナーサイズモバイル

Question

に私はこの数ヶ月前のブログに本当に良い経験をしましたので、私は、誰かが親切に再び私を助けるためになります願っています:)

私はSquarespace上のウェブサイトに取り組んでいますモバイル上のバナーに問題があります。ここに私のウェブサイトがあります：https://sim-zuk-zrdc.squarespace.com

私が経験している問題は、画像の重要な部分をカットして、モバイル上の画像にあまりにも多くのバナーをズームすることです。

私は完全なサイズを示したコードを見つけました。しかし、それは私がしたくない追加のパディングを追加します。ここでは半分の方法そこに私を取得しているコードがあります：あなたがあなたの携帯電話を確認した場合

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

、イメージがフルサイズですが、今私は、これらの恐ろしい、大きな白いスペースを取得しています。 （私も写真を添付し​​たCLICK ME）

誰もこれを修正する方法を知っていますか？ PLEAAAAAAASE :)

はあなたがMarquee template権利を使用している事前

Answer 1

にありがとうございましたか！

視差画像の間に白い空白が表示される理由は、<img>ではなく、画像コンテナの高さを制御していることになります。<div>

Squarespaceのcontent-fillクラスは、SquarespaceのImageLoader YUI（javascript）画像の読み込みとトリミングユーティリティで使用されるクラスであり、画像をコンテナに合わせてサイズを動的に変更します。

これにより、Squarespaceの開発者モードを有効にしない限り、コンテナのサイズのみを制御でき、<img>自体は制御できません。 Content-fillクラスを削除し、正しいモバイルサイズのImageLoaderクラスを追加し、ウィンドウのサイズを変更したときにYUI/jsを使用してイメージをリロードすると、Marqueeのインデックスビューのテンプレートファイルをカスタマイズする必要があります。

デベロッパーモードを使用していますか？