Neu Bilder sind mobil im fullscreen zu klein

[Specker]

Hallo

Unsere Artikelbilder auf der Productdetail-Page werden in der mobilen Ansicht nicht mehr richtig dargestellt im Fullscreen. (Nova-Child)

Original Nova Template hilft nicht weiter - gleicher Fehler.
Leider weiß ich nicht ab wann das Problem angefangen hat zu existieren.

In Chrome werden die Bilder auch zu klein angezeigt, wenn ich die Fenstergröße auf mobil stelle.
Firefox hingegen zeigt alles korrekt an bei mir in mobiler Fenstergröße.
D.h. die Bilder liegen alle in der korrekten Größe auf dem Server vor.

Ich habe alle custom CSS Sachen deaktiviert testweise, aber das bezieht sich ja eh nur auf mein Child Template.

Eigentlich kann es sich ja nur um eine Backend Einstellung dann handeln, oder?

Im Anhang:
Bild 1 -> Firefox, so wie es mobil aussehen sollte.
Bild 2 -> Chrome, so wie es mobil aktuell aussieht.

Help please

 

[css-umsetzung]

Das liegt nicht am css

erstelle in deinem Child Template die Datei productdetails/product_images_modal.tpl
und füge diesen Inhalt dort ein:

{* in sizes wurde das auto entfernt, da die Bilder im Chrome sonst zu klein sind *}
                        {block name='productdetails-product-images-modal-image'}
                            <div class="square square-image">
                                <div class="inner">
                                    {image alt=$image->cAltAttribut
                                        class="product-image"
                                        fluid=true
                                        lazy=true
                                        webp=true
                                        src="{$Artikel->Bilder[0]->cURLNormal}"
                                        srcset="
                                            {$image->cURLMini} {$image->imageSizes->xs->size->width}w,
                                            {$image->cURLKlein} {$image->imageSizes->sm->size->width}w,
                                            {$image->cURLNormal} {$image->imageSizes->md->size->width}w,
                                            {$image->cURLGross} {$image->imageSizes->lg->size->width}w"
                                        sizes=""
                                        data=["list"=>"{$image->galleryJSON|escape:"html"}", "index"=>$image@index]
                                    }
                                </div>
                            </div>
                        {/block}

 

[Specker]

Ach in dieser tpl wird das geregelt.. hatte in image.tpl vergeblich gesucht.
Vielen lieben Dank CSS, jetzt läuft es wieder!

kurze Frage zum Verständnis:
Was ist die Ursache des Fehlers? Vorhin habe ich mal in die aktuelle Shop Template Version
reingeschaut (5.3.3), dort steht es noch auf "auto".
Theoretisch müssten doch alle Shopbetreiber dieses Problem haben?

 

[css-umsetzung]

Haben sie auch.
Ich stand da auch wie doof da und hatte ein klärendes Gespräch mit JTL

Ich zitiere mal Ausschnitte von @OliverS :

Da ist Chrome schuld. Chrome setzt das aktuell anscheinend immer auf 300x150px, wenn sizes="auto" für die Bilder/Sources hinterlegt ist. Das kannst du theoretisch aus der /templates/NOVA/productdetails/product_images_modal.tpl rausnehmen.

Das hat irgendwas mit contain-intrinsic-size und object-fit zu tun. object-fit: none führt bei mir im Testshop (Da hab ich 1:1 Bilder, 1024x1024px) dazu, das die oben und unten abgeschnitten werden:

 

[Specker]

Danke für die Aufklärung! Endlich also mal ein nicht selbstverschuldetes Problem..