Thema: Hochkant Artikel Bilder werden plötzlich gestaucht angezeigt

woodpecker · **Antwort #15 am:** 17. Februar 2023, 11:50:07

Auch die Quadratischen Bilder werden mit

width: intrinsic;

in die Breite gezogen.

Markus · **Antwort #16 am:** 17. Februar 2023, 12:05:17

Hi,

ok ... dann muss ich mir was anderes überlegen. Macht das bitte wieder rückgängig.

Alternativ könnt ihr das hier verwenden.
Das ist aber noch kein endgültiger Fix, da der IE11 das nicht kann.

Code: CSS [Auswählen]

.lb_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit:contain;
}

Da muss ich mir was überlegen.

Markus

woodpecker · **Antwort #17 am:** 17. Februar 2023, 12:19:07

OK vielen Dank.
Das Problem tritt übrigens nur bei Geräten auf ab macOS Ventura 13.2 mit Safari Version 16.3 und IOS 16.3.

Grüße
Rene

Markus · **Antwort #18 am:** 17. Februar 2023, 12:48:16

HI,

ich habe den obigen Code mit "object-fit:contain" gerade mal auf meinem alten Rechner mit IE11 ausprobiert.
Der funktioniert bei mir.

Kann das noch jemand bestätigen?

Markus

S Smith · **Antwort #19 am:** 17. Februar 2023, 13:12:28

Hi Markus,

danke für deine Mühe.
Ich habe jetzt aufm Mac, iPad und iPhone getestet, jeweils Safari und Firefox, und es funktioniert einwandfrei mit mit "object-fit:contain" .

Zusätzlich habe ich noch einen Windows Rechner mit Microsoft Edge Version 110 geprüft und da wird auch alles richtig angezeigt.
Sollte wohl jetzt so passen.

Danke dir !!!

LG SVEN

[EDIT Tomcraft 17.02.2023: Full-Quote entfernt, siehe: FAQ: Full-Quotes und Groß-/Kleinschreibung - mit anderen Worten Netiquette!]

S Smith · **Antwort #20 am:** 17. Februar 2023, 13:29:38

Mist jetzt doch noch einen Fehler entdeckt. Wenn man jetzt auf die Artikelseite geht, sind die die Hochformat Bilder nun dort gestaucht.

S Smith · **Antwort #21 am:** 17. Februar 2023, 13:41:55

Hab jetzt bei :
.pd_big_image img
auch den "object-fit:contain" code eingefügt.
Kann man das so machen?

Markus · **Antwort #22 am:** 17. Februar 2023, 13:49:28

Hi Sven,

ja ... kannst du ... es gibt da noch ein paar Stellen.
Hier die komplette Liste:

/* BISHER */

Code: CSS [Auswählen]

.box_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 20%;
max-height: 20%;
-webkit-transform: scale(4.4);
-moz-transform: scale(4.4);
-ms-transform: scale(4.4);
-o-transform: scale(4.4);
transform: scale(4.4);
}

/* NEU */

Code: CSS [Auswählen]

.box_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 88%;
height: 88%;
object-fit:contain;
}

/* BISHER */

Code: CSS [Auswählen]

.subcat_image img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 20%;
max-height: 20%;
-webkit-transform: scale(4.4);
-moz-transform: scale(4.4);
-ms-transform: scale(4.4);
-o-transform: scale(4.4);
transform: scale(4.4);
}

/* NEU */

Code: CSS [Auswählen]

.subcat_image img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 88%;
height: 88%;
object-fit:contain;
}

/* BISHER */

Code: CSS [Auswählen]

.pd_big_image img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 25%;
max-height: 25%;
font-size: 0;
-webkit-transform: scale(4.0);
-moz-transform: scale(4.0);
-ms-transform: scale(4.0);
-o-transform: scale(4.0);
transform: scale(4.0);
}

/* NEU */

Code: CSS [Auswählen]

.pd_big_image img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 0;
width: 100%;
height: 100%;
object-fit:contain;
}

/* BISHER */

Code: CSS [Auswählen]

.pd_small_image_inner img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 20%;
max-height: 20%;
-webkit-transform: scale(4.4);
-moz-transform: scale(4.4);
-ms-transform: scale(4.4);
-o-transform: scale(4.4);
transform: scale(4.4);
}

/* NEU */

Code: CSS [Auswählen]

.pd_small_image_inner img {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 88%;
height: 88%;
object-fit:contain;
}

/* BISHER */

Code: CSS [Auswählen]

.slider_bestseller .carousel_box .cb_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 20%;
max-height: 20%;
-webkit-transform: scale(5.0);
-moz-transform: scale(5.0);
-ms-transform: scale(5.0);
-o-transform: scale(5.0);
transform: scale(5.0);
}

/* NEU */

Code: CSS [Auswählen]

.slider_bestseller .carousel_box .cb_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
object-fit:contain;
}

Markus

S Smith · **Antwort #23 am:** 17. Februar 2023, 13:58:11

@ Markus

Alles klar. Ändere ich mal alles. Danke.

Viele Grüße

SVEN

Markus · **Antwort #24 am:** 17. Februar 2023, 15:36:27

Hi,

könnte das villeicht nochmal jemand von euch testen ob das für Safari funktioniert?

Code: CSS [Auswählen]

.lb_image img {
margin: auto;
position: absolute;
font-size: 0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}

Im Prinzip das gleiche wie vorher auch nur ohne das "transform".

Markus

woodpecker · **Antwort #25 am:** 17. Februar 2023, 15:57:16

Hallo Markus,

damit werden die Bilder wieder gestaucht dargestellt.

Grüße
Rene

Timm · **Antwort #26 am:** 17. Februar 2023, 15:58:30

In den Entwicklertools in Safari funktioniert es bei den Top Artikeln. Könnte es erst heute Abend richtig testen. Vielleicht ist ja jemand schneller.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Grüße Timm

EDIT:
Bei den Artikelbildern ging es ja die ganze Zeit mit quadratischen Bildern und auch mit dem neuen Code.

[ Für Gäste sind keine Dateianhänge sichtbar ]

Bei den Bestsellerslider Bildern scheint es nicht zu Funktionieren weder mit 88% noch 100% für width und height.

[ Für Gäste sind keine Dateianhänge sichtbar ]

@woodpecker
Wenn etwas nicht funktioniert bitte immer genau schreiben welche Bilder gestaucht werden, oder wenn wirklich alle Bilder gestaucht werden, dann explizit alle schreiben.

Kann es sein, dass du die Caches im Shop und des Browsers nicht gelöscht hast? und zur Sicherheit auch mal unter Safari-Einstellungen-Datenschutz-Websitedaten verwalten für die Domain löschen.

woodpecker · **Antwort #27 am:** 17. Februar 2023, 16:31:43

Hallo Tim,

die Caches im Shop und im Browser wurden immer gelöscht.

Mit dem Code:

Code: CSS [Auswählen]

.lb_image img {
margin: auto;
position: absolute;
font-size: 0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
}

werden quadratische und hochformatige Bilder breit gezerrt.

Nur zusätzlich mit :

Code: CSS [Auswählen]

object-fit:contain;

gibt es keine Probleme mit allen Formaten.

woodpecker · **Antwort #28 am:** 17. Februar 2023, 16:38:31

@ Markus

Mit dem Code:

Code: CSS [Auswählen]

.lb_image img {
margin: auto;
position: absolute;
font-size:0px;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 100%;
max-height: 100%;
object-fit:contain;

gibt es auch im IE11 bei mir keine Probleme.

noRiddle (revilonetz) · **Antwort #29 am:** 17. Februar 2023, 17:07:59

Meine ich das nur oder wird ohne das scale() und mit den width- und height-Werten auf 100% das Bild kleiner dargestellt als es sein könnte wenn man in der .listingbox auf 100 % ist ?
In anderen Worten:
Wenn horizontal nur noch ein Container im Listing angezeigt wird, wirkt sich das margin:auto nicht mehr aus wie vorher; heißt, sie endet an der Grenze des bild-umgebenden Containers, was das Bild kleiner macht als eigtl. Platz da wäre.
Der Herangehensweise mit dem scale() sollte wahrscheinlich gerade das verhindern.

Ein echt kompliziertes Unterfangen das perfekt hinzubekommen.
Ist eigtl. zum würgen, wo man dachte die alten Zeiten mit den ganzen Hacks um allen Browser zu genügen wären vorbei.
Das nervt echt.
Wer braucht Safari (wer braucht überhaupt Apple

) oder Opera Mini, auch so ein Kandidat...

Gruß,
noRiddle