Liebe Leute!
Schon seit längerem grüble ich über folgendem Problem:
Im Kategorielisting ist die Breite der Produktboxen (und somit auch die Breite des Produktbildes) variabel abhängig von viewport und Displayauflösung (Angaben in %, 1 bis 3 spaltiges Layout). Die Höhe der Box, in die das Produktbild reinkommt, ist jedoch je nach viewport mit fixen Werten vorgegeben (class product–image aus product-box.less)
width: auto; height: 18.75rem; (>78.75em) product-box.less (660)
width: auto; height: 17.5rem; (>64em) product-box.less (604)
width: auto; height: 15rem/240px; (>48em) product-box.less (549)
width: 50%; height: 100%; (>30em) product-box.less (520)
width: auto; height: 12.5rem/200px; product-box.less (418)
width: auto; height: 11.25/180px; product-box.less (106)
Damit habe ich aber das Problem, daß sich das Seitenverhältnis ständig ändert, und zwar je nach viewport/layout von extremem Querformat (zB Samsung Galaxy Note) bis hin zu extremem Hochformat (ipad), und am Desktop sowieso, sobald man das Fenster vergrößert/verkleinert.
Was ist der Hintergrund dieses Verhaltens?
Meine Überlegung ist nun, die Boxhöhe dynamisch anhand der gegebenen Breite für ein fixes Seitenverhältnis zu berechnen (Variante 1) oder die Breite der Produktboxen je viewport zu fixieren (Variante 2).
Zu Möglichkeit 1 stellen sich die Fragen:
Kann ich eine dynamische Ermittlung der Boxbreite und darauffolgend eine Berechnung der Höhe mittels less machen oder geht das nur über js?
Falls ja, verlangsamt das die Listing Seite?
Bin Euch für jeden Tip und Hilfe dankbar, da ich hier ziemlich feststecke …
Danke und schönen Abend!
Sel4