Bilder über komplette Breite darstellen

    Hallo zusammen,


    ich mal wieder mit einem neuen Anliegen. Ich würde gerne das folgende Bild über die komplette Breite des Bildschirms bzw. bodys darstellen. Habe es hierzu mit folgendem Code in der Custom-CSS versucht:

    img {

    display: block;

    width: 100%;

    height: auto;

    }


    Das Ergebnis war, dass das Bild in die Breite gezogen wurde und bis auf kleine weiße Streifen links und rechts auch alles gepasst hat. Allerdings hat sich dieser Code auch auf alle anderen Bilder der Website ausgewirkt und das möchte ich nicht haben.


    Gibt es eine Möglichkeit, dass ich NUR ein einziges bzw. ausgewählte Bilder vergrößere?



    Link zu Seite: maler-spiess.de


    Noch eine Info: Ich nutze den JCE Editor. Evtl. gibt es ja auch dort eine mir unbekannte Einstellung oder eben über CSS.


    Das Ergebnis soll wenn möglich so aussehen:



    Danke im Voraus!


    tomislav

    Deine Bilder liegen im Contentbereich, damit hast Du erst mal nur die Möglichkeit die Breite voll auszunutzen.


    In Zeile 1762 könntest Du aus einem max-width ein width machen.

    CSS
    img {
  display: block;
  max-width: 100%;
  height: auto;
}

    ändern in

    CSS
    img {
  display: block;
  width: 100%;
  height: auto;
}
    Zitat von tomislav

    Habe es hierzu mit folgendem Code in der Custom-CSS versucht:

    [...]

    Zitat von tomislav

    bzw. ausgewählte Bilder vergrößere

    Deine CSS wirkt auf alle Tags img.

    Realisiere es über eine Klasse und weise den betroffenen Bildern diese Klasse zu.

    Ungeprüft:

    Code
    .breitbild {
width: 100%;
height: auto;
...
}

    ------------------------------------------------------------
    Gruß vom Jörg
    (Lehrer ist kein Beruf sondern eine Diagnose. oops )

    Solange die Bilder im Artikel-Bereich ausgegeben werden und hier alle Bilder volle Breite laufen dürfen kannst du das auch global oder seitenweise über die bereits vorhanden Klassen einschränken:

    CSS
    .item-page img {
 width: 100%;
}

[oder]

body.itemid-107 .item-page img {
 width: 100%;
}

    Noch wichtiger wäre es, die Seitenlast zu reduzieren, denn die auch an anderer Stelle geladenen Bilder sind alle viel zu groß und damit ungeeignet.

    Zitat von Indigo66

    Deine Bilder liegen im Contentbereich, damit hast Du erst mal nur die Möglichkeit die Breite voll auszunutzen.


    In Zeile 1762 könntest Du aus einem max-width ein width machen.

    CSS
    img {
  display: block;
  max-width: 100%;
  height: auto;
}

    ändern in

    CSS
    img {
  display: block;
  width: 100%;
  height: auto;
}

    Das war wie gesagt das, was ich bereits probiert hatte. Dadurch wurden leider alle Bilder angesprochen. Danke trotzdem

    Zitat von addi

    Solange die Bilder im Artikel-Bereich ausgegeben werden und hier alle Bilder volle Breite laufen dürfen kannst du das auch global oder seitenweise über die bereits vorhanden Klassen einschränken:

    CSS
    .item-page img {
 width: 100%;
}

[oder]

body.itemid-107 .item-page img {
 width: 100%;
}

    Noch wichtiger wäre es, die Seitenlast zu reduzieren, denn die auch an anderer Stelle geladenen Bilder sind alle viel zu groß und damit ungeeignet.

    Der zweite Code funktioniert, danke! :) Allerdings wird das Bild eben nur über die Breite des Contentbereichs dargestellt, gefällt mir noch nicht so richtig. Wahrscheinlich ändere ich nochmal was.


    Danke für den Tipp mit der Bildkomprimierung, habe ich so umgesetzt!