Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Bild breite automatisch anpassen?

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Bild breite automatisch anpassen?

    Hi,

    ich habe unten auf meiner Seite ein Bild mittig eingefügt mit einer CSS Class.
    Nun würde ich gerne das die Skalierung vom Bild mit der Browser-Größe geht und sich automatisch anpasst.

    CSS
    HTML-Code:
    #paymentlogo {
        background-image:url('images/payment.png');
        background-repeat: no-repeat;
        width: 926px;
        height: 99px;
        margin: 0 auto 0 auto;
    }
    Wie kann ich das machen?

    MfG
    PlayAkoya


  • #2
    MOD: Verschoben von PHP-Einsteiger
    Competence-Center -> Enjoy the Informatrix
    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

    Kommentar


    • #3
      Sofern du kein Div um dein Bild hast, lege dein Bild in einem Div, dann gibst du deiner CSS-Klasse des Bildes einfach ein height: 100% und width: 100% sobald sich nun die Größe deines Browsers verkleinert, verkleinert sich auch die größe deines Bildes.
      Beispiel:

      HTML-Code:
      <!DOCTYPE html>
          <html lang="de">
              <head>
                  <title>CSS Beispiel</title>
                  <meta charset="utf-8">
                  <style type="text/css">
                      body {
                          width: 100%;
                          height: 100%;
                      }                
                      .content {
                          position: relative;
                          margin: 5px;
                          min-height: 1px;
                      }
                      .image-box {
                          position: relative;
                          text-align: center;
                          border: 1px black solid;
                          padding: 5px;
                      }
                      .image-styler {
                          margin: 5px;
                          width: 100%;
                          height: 100%;
                          display: inline-block;
                      }
                  </style>
              </head>
              <body>
                  <div class="content">
                      <div class="image-box">
                          <img class="image-styler" src="/dein/Pfad/zur/Datei/example.jpg" alt="picture not found"></img>
                  </div>
              </body>
          </html>

      Kommentar


      • #4
        Hallöchen,

        Zitat von Dropelikeit Beitrag anzeigen
        Sofern du kein Div um dein Bild hast, lege dein Bild in einem Div, dann gibst du deiner CSS-Klasse des Bildes einfach ein height: 100% und width: 100% sobald sich nun die Größe deines Browsers verkleinert, verkleinert sich auch die größe deines Bildes.
        Beispiel: (..)
        Dropelikeit Es reicht völlig, dem Bild eine (maximale) Breite von 100% zu verpassen. Da braucht's auch keinen Container. Hier mal drei Varianten für die Verwendung im responsive Design:

        - Responsive Images

        Viele Grüße,
        lotti
        [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

        Kommentar

        Lädt...
        X