[4.2]ウィンドウ幅が630px未満の場合, 画像サイズが崩れるのを修正

[nanasess]

概要(Overview・Refs Issue)

closes #5449

• ウィンドウ幅が630px未満の場合, 画像サイズが崩れるのを修正
• 商品一覧、商品詳細画面が該当する
• Core Web Vital の Cumulative Layout Shift(CLS)対策のため、以下の PR によって img タグの width, height が付与されたことによる影響
  • refs CWVのCLS対応のために商品一覧画像のwidth、height追加 #5022
  • refs CWVのCLS対応のために商品詳細画像のwidth、height追加 #5023

方針(Policy)

• 商品一覧は、width, height 属性を削除しても CLS のスコア低下が軽微なので、 width, height 属性を削除する
• 商品詳細は、CSS の transform を使用して、元のサイズ近くまで変形させた後に width, height 属性を削除する
  • transform を使用すれば、CLSの影響を受けない(https://web.dev/i18n/ja/cls/#-5)

実装に関する補足(Appendix)

テスト（Test)

画像が崩れず、CLSのスコアが0.1未満になっていることを確認

商品詳細

商品一覧

相談（Discussion）

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更はありません
• フックポイントの呼び出しタイミングの変更はありません
• フックポイントのパラメータの削除・データ型の変更はありません
• twigファイルに渡しているパラメータの削除・データ型の変更はありません
• Serviceクラスの公開関数の、引数の削除・データ型の変更はありません
• 入出力ファイル(CSVなど)のフォーマット変更はありません

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか
  • 権限を超えた操作が可能にならないか
  • 不要なファイルアップロードがないか
  • 外部へ公開されるファイルや機能の追加ではないか
  • テンプレートでのエスケープ漏れがないか

[codecov-commenter]

Codecov Report

Merging #5456 (477cb8f) into 4.2 (3c6c26a) will increase coverage by 24.47%.
The diff coverage is n/a.

@@              Coverage Diff              @@
##                4.2    #5456       +/-   ##
=============================================
+ Coverage     53.02%   77.49%   +24.47%     
- Complexity     6166     6247       +81     
=============================================
  Files           466      468        +2     
  Lines         20959    21004       +45     
=============================================
+ Hits          11113    16278     +5165     
+ Misses         9846     4726     -5120     

Flag	Coverage Δ
E2E	49.48% <ø> (-0.01%)	⬇️
Unit	76.99% <ø> (+65.66%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/Eccube/EventListener/ExceptionListener.php	83.67% <0.00%> (-4.09%)	⬇️
src/Eccube/Service/CsvImportService.php	71.96% <0.00%> (-1.96%)	⬇️
.../Eccube/Stream/Filter/SjisToUtf8EncodingFilter.php	80.64% <0.00%> (ø)
src/Eccube/Stream/Filter/ConvertLineFeedFilter.php	100.00% <0.00%> (ø)
src/Eccube/Twig/Extension/EccubeExtension.php	82.35% <0.00%> (+0.98%)	⬆️
src/Eccube/Util/CacheUtil.php	82.85% <0.00%> (+1.42%)	⬆️
...ntroller/Admin/Setting/Shop/DeliveryController.php	81.81% <0.00%> (+1.70%)	⬆️
src/Eccube/Entity/Member.php	85.56% <0.00%> (+2.06%)	⬆️
...Eccube/Controller/Admin/Content/FileController.php	87.13% <0.00%> (+2.07%)	⬆️
...ntroller/Admin/Customer/CustomerEditController.php	95.34% <0.00%> (+2.32%)	⬆️
... and 187 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3c6c26a...477cb8f. Read the comment docs.

[chihiro-adachi]

@nanasess
ありがとうございます。修正確認しました。