3 Fragen zu Bildern: einheitliche Größe; Center; Rahmen

  • Servus Leute,

    ich habe mir gestern eine Photoblog erstellt und dachte mir es wäre schön wenn die Bilder alle einheitlich groß wären. D.h. ich muss die Bilder nicht alle manuell mit width und height versehen sondern das macht das CSS für mich.

    Ich bin inzwischen so weit das ich das img-Tag mir der class="bildw" bzw. class="bildh" versehe. Ich habe zwei Klassen weil ich ja will, dass die Querformatbilder die volle Breite nutzten sollen aber die Hochformatbilder eben nicht.

    HTML
    img.bildw {
    width: 700px;
    height: auto;
    }
    img.bildh {
    width: auto;
    height: 450px;
    }


    Meine Frage ist nun gibt es eine bessere Alternative. Kann man mit dem CSS festlegen, wenn es Hochformat ist dann mach das wenn nicht dann das. Geht das?

    Meine zweite Frage ist: Wie kann ich es erreichen, dass die Bilder immer in der Mitte des Containers sind. Es gibt ja meines Wissens keinen "center" befehl bzw. float=center, oder? Wie kann es dann Erreichen dass die Bilder in der Mitte sind?

    Dritte Frage: Ich würde gerne einen schönen Rahmen um jedes Bild machen. Ich dachte das ginge so:

    HTML
    img {
      padding: 10px;
      border: 5px solid #000;
      margin: 5px;
    }

    Aber aus unerklärlichen Gründen funktioniert das nicht. Irgendwie ignoriert der Browser mein Padding. Wieso?

    Danke schöne für eure Hilfe,
    double-H

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Hi,


    ich habe mir gestern eine Photoblog erstellt und dachte mir es wäre schön wenn die Bilder alle einheitlich groß wären. D.h. ich muss die Bilder nicht alle manuell mit width und height versehen sondern das macht das CSS für mich.

    die Abmessungen eines Bildes gehören deshalb in den Quelltext, damit der Browser den Platz dafür schon mal reservieren kann.
    Sonst kann es beim Laden der Seite zu unschönem Gezappel führen, weil die Bilder i.d.R. zuletzt vom Browser geladen werden.


    Meine zweite Frage ist: Wie kann ich es erreichen, dass die Bilder immer in der Mitte des Containers sind. Es gibt ja meines Wissens keinen "center" befehl bzw. float=center, oder? Wie kann es dann Erreichen dass die Bilder in der Mitte sind?

    text-align:center; für den Container in dem das Bild hockt z.B.


    Dritte Frage: Ich würde gerne einen schönen Rahmen um jedes Bild machen. Ich dachte das ginge so:

    HTML
    img {
      padding: 10px;
      border: 5px solid #000;
      margin: 5px;
    }

    Aber aus unerklärlichen Gründen funktioniert das nicht. Irgendwie ignoriert der Browser mein Padding. Wieso?

    Zu geringe Spezifität??

    Ein Link zum Problem wäre gut. ;-)

  • Danke schön koslowski!

    Das hat mir geholfen! Ich habe nochmal genauer hingeguckt und jetzt habe ich die Fehlerquellen gefunden.

    Das Bild ist schön in der Mitte mit text-algin:center;
    und auch der Rahmen ist nun da. Weiter unten im CSS war das nochmal definiert und das erklärt warum meine Angaben nicht gewirkt haben.

    Nun klappt alles.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!