span.rightcontentimage - Bild passt sich nicht an max-width/height an

[andi.ebar]

Hallo Community,


nachdem meine letzte Frage so prompt erfolgreich beantwortet wurde bitte ich ganz dreist nochmal um Hilfe


Und zwar kriege ich es irgendwie nicht gebacken dass Bilder im Content die gewünschte Größe erhalten trotz meiner Meinung nach richtiger CSS - zu sehen hier:  [url=http://www.zwicknagel-fahrraeder.de/beta/]http://www.zwicknagel-fahrraeder.de/beta/[/url]  soll so aussehen : http://www.zwicknagel-fahrraeder.de (hier mit DIV geregelt)

der CSS-Code dazu:

Code Auswählen Erweitern

/* [bildrechts|...] */
span.rightcontentimage {

    float:right;
border: solid;
max-width: 80px;
max-height:100px;
margin: 0px;
padding: 0px;

}


Das Bild bleibt in der Originalgröße, nur der Rahmen verändert sich in die gewünschte Pixelzahl - weiß jemand woran das liegt?


mfG

Andi.eBar

[stefanbe]

Besser du änderst die Bildgröße

lg stefanbe

[andi.ebar]

Hm,

das ist natürlich eine simple Lösung jedoch bin ich mir nicht sicher ob ich das meinen Kunden auch zutrauen kann wenn er neue Bilder in nem Jahr hochladen möchte ..


VG,
andi.ebar

[stefanbe]

Du meinst so direkt von der Camera (wo bild größen ab 10MB erst anfangen) ab auf die Webseite (wo sie dann nur mit 100px * 180px Dargestellt werden) na Super da macht Internet ja so richtig Spaß.

Du soltest deinem Kunden mehr zutrauen.

lg stefanbe

[andi.ebar]

Hihi ja vieleicht - ich hab jetzt mal notdürftig mit

Code Auswählen Erweitern

overflow: hidden; "gelöst" -

allerdings ist mir aufgefallen das beim mozilo Syntax

[bild|@=Kategorie:SAM_5870.jpg=@]

es durchaus wie gewohnt

Code Auswählen Erweitern

/*Bild*/
img.contentimage {

border: solid;
margin-left: 550px;
margin-top: 0px;
width: 45%;


}funktioniert, ich mir aber nicht erklären kann wieso - liegt es am span?



und ja ich werde bei Übergabe auf jedenfall noch ein CrashKurs in Bildgrößen anpassen geben



VG andi.ebar

[Thorstn]

liegt es am span?

Ich habe dieses Thema nur mal kurz überflogen, aber wenn Du "bildrechts" einfügst, so greift natürlich die span "rightcontentimage", und diese definiert in der CSS eine maximal Breite von 80 Pixel (siehe den zitierten Schnipsel aus der CSS aus Deinem Eröffnungsbeitrag) bzw. maximale Höhe von 100 Pixel.

Wie breit soll/darf das rechtsbündige Bild denn sein? Wenn es z.B. 300 Pixel sein dürfen, dann solltest Du die Angaben in der CSS ändern in

Code Auswählen Erweitern

max-width:300px;

in der span.rightcontentimage.

Abgesehen davon gebe ich Stefanbe völlig recht: ein Bild/Foto sollte vor dem Hochladen immer schon auf die gewünschte Größe reduziert werden! Ich habe auch Kunden, die ein Foto unverändert hochladen (ca. 7 MB, 4000 mal 3000 Pixel) aber auf der Homepage eh nur 600 Pixel Breite dargestellt werden (reine Ansicht, kein Download des Fotos).
Ein Besucher der Homepage mit langsamem Internet (kein DSL o.ä.) und Smartphone (Trafficbegrenzung) hat dann wirklich keinen Spaß 

Jaja, ich weiß... der Kunde möchte so wenig wie möglich tun müssen. Ist verständlich (weil er sich um SEIN Geschäft kümmern muss), aber die Schuhe muss er sich auch selbst zubinden und gucken, ob sie passen...

Gruß,
Thorsten

[andi.ebar]

Hallo Thorsten,


danke für die Antwort !

Mit den Bildern habt ihr natürlich absolut recht, ich werde in Zukunft strenger zu meinen Kunden sein !

Mit dem für User beschränkten Backend von mozilo CMS haben sie im Vergleich zu Joomla/Wordpress eh schon ein fast sorgenfreies Webseitenleben


Bzgl des Problems mit contentimage / rightcontentimage ist mir klar das diese jeweils auf die passende css greift

- was ich meine/meinte ist dass wenn du dir z.B. diese Inhaltseite ankuckst : http://www.zwicknagel-fahrraeder.de/beta/Kategorie.html kann man sehen dass sich das Bild bei dem Befehl "Bild" richtig skaliert während es bei "Bildrechts" über mein Content Div laufen würde bzw jetzt im Fall durch overflow: hidden versteckt wird

Code Auswählen Erweitern

/* [bildrechts|...] */
span.rightcontentimage {

    float:right;
border: solid;
margin-top: 0px;
margin-right: 55px;
overflow: hidden;
max-height: 540px;
max-width: 600px;



}



/*Bild*/
img.contentimage {

border: solid;
margin-left: 5%;
margin-right: 5%;
margin-top: 20px;

max-width: 40%;
max-height: 100%;

float: left;
clear: both;



}



vG

[Thorstn]

Aber jetzt klappt es doch offensichtlich, oder?

[andi.ebar]

ne nicht ganz - span.rightcontentimage hat nur overflow:hidden und schneidet das Bild ab und zeigt es nicht vollständig, während contentimage das Bild an die Größe anpasst und vollständig gezeigt wird


.. aber da ich contentimage ein flow mitgegeben habe ist es zumindest zweckerfüllend

[djr]

img.rightcontentimage (nicht span.rightcontentimage) und Alles wird gut 

[andi.ebar]

... ahhh

[Thorstn]

img ... span)

Jau... und ich dachte immer: IRGENDETWAS stimmt da am Code nicht. Wie war das noch mit Augen und Tomaten?