【トラブル】画像変更時に画面幅と画像のサイズが合わない

問題

画像をアップロードして変更したのですが、画面から画像がはみだしてしまいます。または、画像が伸びてしまいます。

解決方法

VWOエディタの画像変更機能を利用して、VWOに画像をアップロードする際は、画像の縦幅・横幅がファイルのオリジナルサイズに設定されます。

その為、オリジナルのページでは適正なサイズにCSSで調整して表示されていた画像が、テストパターンでは想定していたよりも大きく表示されたり、場合によっては伸びて表示される可能性があります。

この事象の原因はCSSのバッティングなので、VWOエディタのスタイル機能を利用してCSSを調整することで、解決することができます。

例：画像が画面右側に溢れてしまう

スタイル機能で画像サイズを自動化する方法

1. 問題となる画像をクリックして、表示されるメニューから 要素変更 を選択します。

2. 次表示されるメニューにて STYLE を選択し、Dimensions セクションから width（横幅）と height（縦幅） を調整することができます。横幅を100%に設定し、縦幅をautoに設定すると、画像がデバイス画面のサイズに合わせて表示されるようになります。

調整前

調整後 

結果