Startseite Skripte für das Wintersemester 2017/18 Webdesign CSS Grundlagen Bildformate CSS für Bilder


CSS für Bilder

Photo by HaraldMM

CSS

img {
    /* damit wird das Bild immer so breit dargestellt,
    wie der „Container“, der das Bild enthält */
    width: 100%;

    /* fehlt diese Angaben, werden Bilder u.U. verzerrt dargestellt! */
    height: auto;
}

Achtung: Wenn Bilder eine geringer Pixel-Breite haben, als der Container, werden sie verpixelt dargestellt!

CSS

img {
    /* damit wird das Bild „mitwachsend“ dargestellt,
    bis es seine echte Pixelgröße erreicht hat;
    danach wächst es nicht mehr */
    max-width: 100%;
    height: auto;
}

max-width verhindert somit, dass Bilder verpixelt dargestellt werden.