Alternative für max-width & max-height ?

[Elektro Roland]

Hallo zusammen,

bin gezwungen externe Bilder (siehe Beitrag - http://www.modified-shop.org/forum/topic.php?id=2365) in unseren Shop einzubinden. Die Bildgröße wird per CSS anhand der Breite - z.B. "width: 150px" deklariert. Soweit kein Problem.

Nun kommt es aber vor, das einzelne Produktbilder schmal aber sehr hoch - z.B. 50 x 200 (BxH) - sind. Diese "verreißen" natürlich das Gesamtbild, da sich das Produktbild von der Höhe nun auf der halben Seite "breitmacht". Gebe ich per CSS neben der Breite auch die feste Höhe "height" mit, wird das Bild gestaucht bzw. gestreckt.

Habe für den Firefox eine Lösung gefunden:
max-width: 150px
max-heigh: 150px
Dies sorgt dafür das kein Bild die Höhe bzw. die Breite von 150px überschreitet und skaliert die Bilder im Originalformat.

Nun mein eigentliches Problem - max-width & max-height werden vom Internet Explorer nicht unterstützt. Kennt jemand ggf. eine Alternative? Wäre für jeden Tipp dankbar. Habe im Netz schon eine Lösung gefunden, diese erfordert allerdings eingeschaltetes Javascript.

Vielen Dank vorab.
Gruß Roland



Linkback: https://www.modified-shop.org/forum/index.php?topic=5587.0

[bewusst]

Hallo,

vielleicht hilft dir das weiter: Min- und Max-width auch für den IE

LG
bewusst

[Elektro Roland]

Hallo bewusst,

vielen Dank für deine Antwort. Genau diese Lösung habe ich bereits getestet. Erfordert Javascript und funtioniert auch nicht 100%.

Gruß
Roland

[bewusst]

Hallo Roland,

kannst du mir einen Link posten.
So ist es für mich einfacher und ich kann mit Firebug besser nach einer Lösung
suchen.

LG
bewusst

[Elektro Roland]

Hallo bewusst,

hier der Link zum Shop --> http://www.rsg24.de/Eltako:.:32.html
Der Shop befindet sich aktuell noch im Aufbau. Wenn alles fertig ist, wird dieser hier natürlich noch vorgestellt.

Danke für deine Mühe.

Gruß Roland

[bewusst]

Hallo Roland,
teste mal meine geänderte Zeile9 der :

/templates/xtc5/module/product_info/product_info_v1.html

Vorausgesetzt du hast im Admin bei dem Produkt anlegen unter
Vorlage für Artikeldetails: product_info_v1  vergeben.
Kopiere deine Datei vor der Änderung!

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><div style="height:150px"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}" height="100%" /></div>{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>

Code: CSS  [Auswählen]

<div style="height:150px">

hier kannst auch 200px eingeben danach wird das Bild größer.
Das div ist das umliegende Element vom Bild somit das Maximum der Größe.
Das Bild selber bekommt

Code: CSS  [Auswählen]

height="100%"

somit passt es sich prozentual an das Max. vom div an.
LG
bewusst

[guensi]

Hmm, die Idee mit dem fixierten div-Container ist verlockend, aber eine hardcoded Definition im Quelltext würde ich nicht machen. Wenn schon dann dem div eine class verpassen und die im css entsprechend formatieren.

Wenn das Problem aber nur die überzogene Höhe einzelner Bilder ist, würd ich das einfacher angehen. Auf den umgebenden Container kann man verzichten. "Keep it simple!"

Die Höhe fix setzen, die Breite auf auto stellen. Kommt dann allerdings ein Bild mit Überbreite wirst du dasselbe Problem mit dem ie nochmal in horizontaler Richtung haben.

Da jedoch moderne Browser (nicht nur der Firefox) das max-width: 150px und max-height: 150px verstehen werden sollte folgendes im css das Problem zumindest für die Höhe lösen:

Code: CSS  [Auswählen]

width: auto;
max-width: 150px;
height: 150px;
max-height: 150px;
 

Das wird ein moderner Browser so interpretieren: Das nachfolgende max-width überschreibt die vorhergehende Anweisung width: auto. Der ie hingegen wird die nachfolgende Anweisung ignorieren, weil er sie nicht kennt und width: auto nehmen. Gleiches gilt für die Höhe.

Für das geschilderte Problem ausschließlich die Höhe betreffend sollte das genügen.

[Elektro Roland]

Guten Morgen zusammen,

ersteinmal vielen Dank für Eure Ideen, die Ansätze sind sehr gut. Habe ein div um das Bild gelegt und diesem per css eine feste Höhe von 200px gegeben. Dem Bild dann per CSS die Hohe 100%.

Leider kommt bei mir der oben genannte Fall vor, dass Bilder breit aber von der Höhe her sehr klein sind. Hier mal ein Beispiel --> http://www.rsg24.de/Klingel-Sprechanlagen/Klingelanlagen/Grothe-Etagenplatte-ETA-2121::5784.html

Diese Art von Bild wird dann natürlich auf die Höhe 200px gestreckt und verreisst dann nach rechts in den Preis.

Die Ansicht im Firefox ist Ok und wäre für mich ausreichend. Der Internet Explorer zeigt das leider nicht so passabel an. Habt Ihr noch ne Idee?

Vielen Dank erstmal an guensi und bewusst
Gruß Roland

[bewusst]

Hallo,

so läuft es auch:
In "stylesheet.css" ganz unten folgendes einfügen:

Code: CSS  [Auswählen]

/*Fuer das umrandete div */
.umranden {
        height:150px;
        width:120px;
}

/* Fuer das Image */
.bildneu {
        height:auto;
        width:auto;
        max-height:150px;
        max-width:120px;
}
 

In der folgenden Datei:

/templates/xtc5/module/product_info/product_info_v1.html

In Zeile9 mit diesem ersetzen:

Code: PHP  [Auswählen]

<a title="{$PRODUCTS_NAME}" href="{$PRODUCTS_IMAGE|replace:"info_images":"popup_images"}" class="thickbox" rel="{$PRODUCTS_ID}"><div class="umranden"><img src="{$PRODUCTS_IMAGE}" alt="{$PRODUCTS_NAME}"  class="bildneu" /></div>{if $PRODUCTS_POPUP_LINK!=''}<br/>{#text_zoom#}{/if}</a>
 

ist eingentlich so wie von guensi aber mit anderer Bemaßung.

LG
bewusst

[Elektro Roland]

Hallo bewusst,

vielen Dank, so funktioniert es wunderbar. Dank auch an guensi.

Viele Grüße
Roland