Verwendung: Wie lege ich die Größe von Bilder fest ?

Rolf Schettler's Avatar

Rolf Schettler

06 Nov, 2015 09:04 AM

Produkt: Vision Contao
Contao-Version: 3.5
Browser und Browserversionen: alle

Ich benutze die Thems VISION, 18/20 und OpenSauce.
Ich habe Probleme die Größe von Bildern festzulegen, so wie ich es im CONTAO Core tun kann.
Es sieht so aus, als ob die Größenangaben die ich bei den Bildeigenschaften angebe, ignoriert werden, und durch Defaultwerte ersetzt werden.
Das ist für mich wichtig, da auch die User die die Seiten bearbeiten mit diesem Verhalten nicht zurecht kommen.
(Bilder die von Text umgeben sind usw...) Wie sieht eine Lösung aus, die es mir erlaubt die Bildgrößen ähnlich des Contao Core festzulegen ?

Vielen Dank

  1. Support Staff 1 Posted by RockSolid Theme... on 06 Nov, 2015 09:49 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Damit sich die Bilder auf kleineren Bildschirmen proportional anpassen ist die Breite der Bilder in Prozent im CSS festgelegt. Sie können dieses Verhalten über den Theme-Assistant mit der Einstellung „Bilder proportional zum Inhaltsbereich skalieren“ für die komplette Seite deaktivieren, oder für einzelne Elemente indem Sie die CSS-Klasse no-resize verwenden.

  2. 2 Posted by beat on 17 Apr, 2017 09:22 AM

    beat's Avatar

    Ich habe auch Probleme mit dem Theme 'Vision' bildgrössen im Contao direkt zu definieren.
    Als Beispiel wird bei diesem Code <a title="hosttech.ch" href="http://www.hosttech.ch/" target="_blank"><img src="files/harley-rider/img/hosttech.gif" alt="" width="80" height="16"></a> die wisth Angabe nicht berücksichtogt und es wird die Originalgrösse angezeigt.
    Im Theme-Assistant habe ich 'Bilder prop.....' auf inaktiv gesetzt.

  3. Support Staff 3 Posted by RockSolid Theme... on 18 Apr, 2017 08:05 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Die Breite der Bilder sollten Sie nicht über das width-Attribut setzen, da die Breite im CSS mit width: 100% überschrieben wird.

    Sie können dem Bild eine CSS-Klasse zuweisen und über diese Klasse die Breite im CSS-Code festlegen.

  4. 4 Posted by beat on 25 Apr, 2017 11:23 AM

    beat's Avatar

    Danke für ihre Antwort.
    Ich finde das schade, dass dies mittels CSS per default überschrieben wird.
    So nimmt das Theme contao eine Funktionalität weg. Ich dneke da sollte doch eine andere Hierarchie berücksichtigt werden.
    Sie sagen ja auch, dass ihre Themes performant sind. Dieses Resizen auf 100% finde ich alles andere als performant. E gibt auch enen erheblichen Aufwand wenn man nun jedes Bild mittels CSS anpassen muss.

  5. Support Staff 5 Posted by RockSolid Theme... on 26 Apr, 2017 05:58 AM

    RockSolid Themes's Avatar

    Sie sagen ja auch, dass ihre Themes performant sind. Dieses Resizen auf 100% finde ich alles andere als performant.

    Sofern die eingestellte Bildgröße mit der Darstellungsgröße zusammenpasst wirkt sich ein Resizing nicht negativ auf die Performance der Website aus.

    Das width-Attribut hingegen sollte aus Performance-Gründen nicht zum Resizen von Bildern verwendet werden. Verwenden Sie stattdessen am besten eine passende Bildgrößeneinstellung im Backend und setzen die CSS-Klasse auf no-resize.

  6. 6 Posted by beat on 27 Apr, 2017 10:20 AM

    beat's Avatar

    > Das width-Attribut hingegen sollte aus Performance-Gründen nicht zum Resizen von Bildern verwendet werden.

    Da wiedersprechen sie sich ja selbst.
    Bei jedem <img> steht 'width: 100%', wenn das kein Resizing, das die Performance beeinflusst, ist ....

  7. Support Staff 7 Posted by RockSolid Theme... on 27 Apr, 2017 05:21 PM

    RockSolid Themes's Avatar

    Bei jedem <img> steht width: 100%, wenn das kein Resizing, das die Performance beeinflusst, ist ....

    width: 100% ist eine Angabe im CSS und nicht dasselbe wie das width-Attribut eines <img>-Tags. Sofern – wie bereits erwähnt – die eingestellte Bildgröße in Contao mit der Darstellungsgröße auf der Website zusammenpasst wirkt sich ein Resizing (über CSS) nicht negativ auf die Performance der Website aus.

  8. 8 Posted by chontao14 on 13 Jul, 2018 08:02 AM

    chontao14's Avatar

    Ich erlaube mir hier nachzufragen, wenn ich bei Links die Bilder ebenfalls einzeln in der Grösse einstellen möchte greift die Lösung über den Theme Assistant nicht. So habe ich versucht einen Klasse zu vergeben im rechten Feld unter Expert "flaggen" und im CSS habe ich das attribut "width" gesetzt mit z.B. 120px. Doch leider wird nicht die Flage verändert sondern der Wert wird beim übergeordneten DIV angesetzt.

    Wie kann ich die Bilder bei den Links in der Grösse einstellbar machen?

  9. Support Staff 9 Posted by RockSolid Theme... on 13 Jul, 2018 09:33 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wenn Sie ein Kindelement über CSS ansprechen möchten können Sie das z. B. mit folgendem CSS-Code versuchen:

    .flaggen img {
        width: 120px;
    }
    

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  10. 10 Posted by chontao14 on 13 Jul, 2018 10:09 AM

    chontao14's Avatar

    Genau, sehr gut, vielen Dank, das hat funktioniert!

  11. 11 Posted by chontao14 on 14 Jul, 2018 07:11 AM

    chontao14's Avatar

    Nun noch eine weitere Frage. Das mit dem Bild wie oben beschrieben, funktioniert ja bestens. Wie kann ich nun noch den .image_container explizit ansprechen? Siehe Bild03. Da möchte ich andere Margin, Padding und Border haben. Aber eben nur bei den Container mit Links, wo ich schon mit ".flaggen img" gearbeitet habe. Habe schon mit verschiedenem rumprobiert, aber es funktioniert nicht.

  12. Support Staff 12 Posted by RockSolid Theme... on 16 Jul, 2018 05:15 AM

    RockSolid Themes's Avatar

    Sie können dem Inhaltselement indem sich der image_container befindet eine CSS-Klasse zuweisen und über diese Klasse den image_container im CSS ansprechen:

    .CSS_KLASSE_DES_INHALTSELEMENTS .image_container {
        margin: ...;
        padding: ...;
        border: ...;
    }
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Bild.JPG 50.8 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac