バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

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

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
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
居住地:
投稿: 302
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公式 Amazon Payプラグイン

統計情報

総メンバー数は88,288名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

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