バージョン選択

フォーラム

メニュー

オンライン状況

96 人のユーザが現在オンラインです。 (74 人のユーザが フォーラム を参照しています。)
登録ユーザ: 2
ゲスト: 94
op_noda koichi_51 もっと...

サイト内検索

プラグイン > バグ報告・利用に関する質問 > 商品詳細画面で縦横比が違う商品画像の並びが不均等になる

バグ報告・利用に関する質問

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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に固定で余白表示を使って画像を均等に配置しようといろいろ試していますが知識不足で上手くできないです。

サイズがバラバラの画像を綺麗に配置するような対応方法がございましたらご享受をお願いしたいです。
お手数おかけしますが宜しくお願い致します。
nyorai
投稿日時: 2019/2/12 10:21
対応状況: −−−
長老
登録日: 2015/8/21
居住地:
投稿: 271
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる
商品一覧でしたら、以下のような感じでいかがでしょうか。

html/template/default/css/style.css


.item_photo {
    display: block;
    margin: 0 0 8px;
    text-align: center;
}
.item_photo img {
    width: 100%;
}



.item_photo {
    display: block;
    margin: 0 0 8px;
    text-align: center;
    height: 255px;
}
.item_photo img {
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
}


こちらの内容を参考にやってみました。
https://1design.jp/web-development/css/1844
yamasyo
投稿日時: 2019/2/12 16:44
対応状況: 確認中
新米
登録日: 2016/2/24
居住地:
投稿: 9
Re: 商品詳細画面で縦横比が違う商品画像の並びが不均等になる
回答ありがとうございます。

早速試したところ商品一覧画面で綺麗に並んでいます。

ただ、画像の高さを255pxに固定していますので、window幅を小さくした場合、画像と画像の下の説明文との間が大きくなるので、これを解消できる方法を確認中です。

window幅が小さくなった場合、画像の幅も小さくなるので、高さを255pxに固定しないで画像の横幅の4分の3倍になるような方法を探しています。
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
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


ec-cube.co

統計情報

総メンバー数は48,300名です
総投稿数は92,896件です

投稿数ランキング

1
seasoft
7332
2
AMUAMU
2712
3
nanasess
1910
4
468
1818
5
yuh
1600
6
red
1333
7
umebius
1296
8
fukap
907
9
h_tanaka
882
10
tsuji
852
11
shutta
835
12 ramrun 789
13
tao_s
758
14 karin 656
15 sumida 641
16
homan
633
17 DELIGHT 571
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.