CSS, HTML und Javascript mit {stil}

CSS img – positionieren und zentrieren

CSS img center – Bilder horizontal und vertikal zentrieren

Bilder werden nicht wirklich in eine Webseite eingefügt – aus technischer Sicht bleiben Bilder an ihrem Speicherort und nur der Pfad zum Bild sitzt i.d.R. als src im HTML-img-Tag. Alternativ bindet CSS Bilder als background-image ein.

Bilder sind inline-Elemente, d.h. sie erzeugen keinen Zeilenumbruch. Bilder werden i.d.R. in HTML-Tags wie div oder figure gesetzt, um sie gezielt auf der Webseite zu positionieren.

Bilder rechts oder links an den Rand des umfassenden Elements zu setzen gehört zu den Routinearbeiten in jedem Content Management System: Dafür bekommen Bilder CSS float: left oder float: right. CSS float kann ein Element allerdings nicht zentrieren.

Bilder mit flexbox horizontal und vertikal zentrieren

Heute tendiert das Webdesign eher zu zentrierten mittig gesetzten Bildern, statt sie rechts oder links vom Text umfließen zu lassen. display: flex zentriert Bilder einfacher als die klassische Methode aus position, left, top und margin.

CSS
.flex { 
    display: flex; 
    justify-content: center; 
    align-items: center;
}
HTML
<div class="flex">
    <img src="donut.jpg" width="215" height="183" alt="…">
</div>
Bild senkrecht und wagerecht zentriert

Bilder zentrieren – die alte Methode

Da sich Bilder in einem img-Tag wie ein übergroßer Buchstabe verhalten, braucht der umfassende Block nur ein text-align: center. Alternativ kann das Bild mit display: block oder display: inline-block zentriert werden.

Um das Bild sowohl vertikal als auch horizontal zu zentrieren, wird es mit top, bottom, left und right vollkommen aus dem sichtbaren Ausschnitt verschoben. Anschließend versetzt margin: auto das Bild in die senkrechte und wagerechte Mitte des umfassenden Elements.

.parent {
    position: relative;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}
Bild senkrecht und wagerecht zentriert

Bilder als background-image zentrieren

Bilder können nicht nur über das img-Tag eingebunden werden, sondern auch via CSS background-image. Dann bietet background-position die einfachste Technik, das Bild innerhalb seines umfassenden Blocks zu zentrieren.

crop-frame 
<div class="center-frame">
  <div class="wild-frame"></div>
</div>

.center-frame { 
  width: 300px;
  height: 200px;
  overflow: hidden
}
.wild-frame {
  background: url(frame.jpg) no-repeat center; 
  width:100%;
  height: 100%
}

Thumbnails à la WordPress

Die Medienübersicht von WordPress zeigt Bilder als quadratische Thumbnails. Dahinter steckt einfaches CSS, das die Bilder zentriert und beschneidet.

Das HTML-Markup besteht aus einem div-Element mit class="thumbnail" und dem Originalbildern im Hochformat und Querformat. Bilder im Hochformat bekommen ein class="portrait".

HTML
<div class="thumbnail">
   <img src="DSC00546-1024x682.jpg" width="1024" height="682" alt="…">
</div>
<div class="thumbnail">
   <img class="portrait" src="DSC04525-967x1024.jpg" width="967" height="1024" alt="…">
</div>
DSC04286
DSC00546-1024x682
DSC04525-967x1024
DSC04722-720x481.jpg
DSC09355-980x632.jpg
DSC06780

Die WordPress-Medienübersicht positioniert die Bilder mit ihrer linken oberen Ecke in die Mitte des umfassenden div-Elements.

Schema für CSS left:-50%, right:-50%

transform: translate(-50%,-50%) bezieht sich auf die Größe des Bildes und versetzt das Bild nach oben links.

Thumbnail mittig mit CSS

height: 100% und width: auto bzw. width:100% und height: auto machen den Thumbnail repsonsive und passen ihn an die Größe des umfassenden Elements an.

CSS für Thumbnails
.thumbnail {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.thumbnail img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%,-50%);
}

.thumbnail img.portrait {
  width: 100%;
  height: auto;
}
center img