どうか教えて下さい！
| 質問 > フロント機能 > 一覧ページと商品詳細ページの写真サイズを統一表示させたい。 |
フロント機能
 |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
| 投稿者 | スレッド |
|---|---|
| udon95 |
投稿日時: 2022/5/16 12:31
対応状況: −−−
|
新米   登録日: 2022/5/13 居住地: 投稿: 4 |
一覧ページと商品詳細ページの写真サイズを統一表示させたい。 ▼テンプレート
[EC-CUBE] EC-CUBEの4.1.2、新規インストール [レンタルサーバ] ロリポップ [OS] OS名Windows、バージョン11 [PHP] PHPのバージョン7.4 [データベース] DB名mysql、バージョン5.7 お教え頂きたい事 一覧ページ、商品詳細ページ共に 縦横サイズが違う写真をUPすると縦横比を維持したまま表示されるため 歪な表示になってしまいます、、、 UP写真の縦横比を統一して表示するにはどのようにしたらよいか調べていますが 4.1.2での方法が無いため、ご存じの方、どうかお教え頂けますと助かります。 宜しくお願いいたします。 |
| udon95 |
投稿日時: 2022/5/17 18:48
対応状況: 確認中
|
新米 登録日: 2022/5/13 居住地: 投稿: 4 |
Re: 一覧ページと商品詳細ページの写真サイズを統一表示させたい。 進捗しましたので、ご報告と新たな教えを乞いたいです。
以下のファイル app/template/default/Product/detail.twig 253行目 260行目 以下に変更することで自動でリサイズは出来ました！ <img src="{{ asset(ProductImage, 'save_image') | imagine_filter('resize', {"thumbnail": {"size": [250, 250], "mode": "inset" }}) }}"> しかし、トリミングされて写真全体の表示が出来ないため トリミングではなく外側に余白を設ける形でのリサイズ方法が分からないため ご存じの方、どうかお教えて頂けますと嬉しく思います。 個人的には"mode": "inset"の部分の書き方だと思っていますが、どうしたら良いか全くわかりません＾＾； どうかご教授のほど宜しくお願いいたします。 |
| balisys |
投稿日時: 2024/12/23 19:25
対応状況: −−−
|
仙人   登録日: 2020/7/5 居住地: 投稿: 502 |
Re: 一覧ページと商品詳細ページの写真サイズを統一表示させたい。 あまり検証はしていませんが、cssで解決できないでしょうか。
aspect-ratio: 1;で画像を囲むタグの比率を1：1に固定し、flexで画像を中央に配置します。 display: flex; justify-content: center; align-items: center; aspect-ratio: 1; |
| スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |
