Bildgrösse im Advanced Menu

Hallo,

es gelingt mir einfach nicht, die Bildgrösse im Advanced Menu zu ändern.

Ich habe eine advanced-menu.less in meinem Template Ordner in _public/src/less/_plugins/advanced-menu.less angelegt.

Darin habe ich einige Anpassungen gemacht, die funktionieren auch.

Aber die Bildgrösse lässt sich einfach nicht ändern.

Ich denke ich nutze nicht das richtige CSS. 

Probiert habe ich:

.teaser–image { wenn ich hier grössen ändere betrifft das nur den Container, nicht aber das Bild selber}

.teaser–image img {wirkt sich nicht aus}

und ein paar andere mit a.teaser–image img etc… aber das geht einafch nicht :frowning:

Was mach ich falsch?

lg

Wilo

Lösung:

Der Style ist:

background-image, aber das Bild wird trotzdem immer abgeschnitten … Hier muss man das anpassen:

.teaser–image {
        .unitize-height(150);
         width: 100%;
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: center center;
        display: block;

        + .teaser–headline,
        + .teaser–text {
            .unitize(margin-top, 40);
        }

 

 

Bild wird dennoch nicht zentriert.

Du kannst die Container-Größe anpassen, wie du es bereits getan hast.

Das Teaser-Bild wird generell bereits zentriert angezeigt, jedoch abgeschnitten. Wenn du möchtest, dass das gesamte Bild angezeigt wird, kannst du das folgendermaßen lösen:

.teaser--image {
    background-size: contain;
}

Damit wird immer das gesamte Bild angezeigt und in den Container eingepasst. Es kann aber sein, dass du dann außen herum Ränder hast, wenn das Bild nicht das gleiche Verhältnis wie der Container hat!

2 Likes

Hallo spswebservices,

danke für die Lösung zur Bildgröße im Advanced Menue.

An SW, warum muss ich für solche Selbstverständlichkeiten erst im Code rumfummeln?  

Servus, stehe quasi vor dem selben Problem.

Habe 50% in den Settings, aber ich finde keine Angabe, welche Größe das Bild dann haben müsste.

Also Höhe 150px und Breite ???px ?