プラグイン > バグ報告・利用に関する質問 > 商品詳細画面で縦横比が違う商品画像の並びが不均等になる |
バグ報告・利用に関する質問
スレッド表示 | 古いものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
yamasyo |
投稿日時: 2019/2/18 17:35
対応状況: 解決済
|
新米 登録日: 2016/2/24 居住地: 投稿: 9 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる 下記のように記載したら解決しました。
.item_photo { background: #cccccc; display: block; margin: 0 0 8px; text-align: center; padding-top: calc(100% * 3 / 4); position: relative; } .item_photo img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:auto; height:auto; max-width:100%; max-height:100%; } 高さを幅の3/4倍に固定したかったので、解決方法として、padding-topに幅の3/4倍を指定しました。 (※paddingの%は幅を基準にしているため) 後は、absoluteを指定して、中央に配置するように設定すれば上手く意図しているように表示できました。 参考サイト ■CSS で横幅に対するアスペクト比の四角形にする http://var.blog.jp/archives/68893886.html ■要素を上下左右の中央に配置・・・ https://coliss.com/articles/build-websites/operation/css/absolute-centering-with-css.html 回答頂きありがとうございましたm(__)m |
yamasyo |
投稿日時: 2019/2/12 16:44
対応状況: 確認中
|
新米 登録日: 2016/2/24 居住地: 投稿: 9 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる 回答ありがとうございます。
早速試したところ商品一覧画面で綺麗に並んでいます。 ただ、画像の高さを255pxに固定していますので、window幅を小さくした場合、画像と画像の下の説明文との間が大きくなるので、これを解消できる方法を確認中です。 window幅が小さくなった場合、画像の幅も小さくなるので、高さを255pxに固定しないで画像の横幅の4分の3倍になるような方法を探しています。 |
nyorai |
投稿日時: 2019/2/12 10:21
対応状況: −−−
|
仙人 登録日: 2015/8/21 居住地: 投稿: 302 |
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる 商品一覧でしたら、以下のような感じでいかがでしょうか。
html/template/default/css/style.css
↓
こちらの内容を参考にやってみました。 https://1design.jp/web-development/css/1844 |
yamasyo |
投稿日時: 2019/2/10 20:38
対応状況: −−−
|
新米 登録日: 2016/2/24 居住地: 投稿: 9 |
商品詳細画面で縦横比が違う商品画像の並びが不均等になる [EC-CUBE] 3.0.16、新規インストール
[レンタルサーバ] ロリポップサーバ [OS] Windows10 [PHP] PHP 7.1.5 [データベース] MySQL 5.6.23-log [WEBサーバ] Apache [ブラウザ] Chrome [導入プラグインの有無] おすすめ商品管理プラグイン、新着商品ブロックプラグイン [カスタマイズの有無]] ほとんどデフォルトのままです。 [現象] 縦横比のサイズがバラバラの商品画像をアップした場合、商品詳細画面で商品画像の並びが不均等で見た目があまりよくないです。 商品一覧画面のサブ画像や、商品詳細画面の商品画像一覧の並びを均等にするようにしたいです。 いちおう、自分でもいろいろ調べて、CSS側で『object-fit: contain;』を使って縦横比を4:3に固定で余白表示を使って画像を均等に配置しようといろいろ試していますが知識不足で上手くできないです。 サイズがバラバラの画像を綺麗に配置するような対応方法がございましたらご享受をお願いしたいです。 お手数おかけしますが宜しくお願い致します。 |
スレッド表示 | 古いものから | 前のトピック | 次のトピック | トップ |