HTML∕XML∕CSS

Quadratische Vorschaubilder mit css realisiert.

Oder Suchmaschinenfreundlich in Englisch, „cropped square images with css“. ;-) Es ist eigentlich ganz einfach und simpel. Wir brauchen dafür nur eine Div-Box, ein Thumbnail was mindestens 5 Pixel und 50 Pixel maximal größere Kantenlänge als die Div-Box hat und wir brauchen noch ein 1 Pixel Transparentes .gif. Anmerkung: Die Technik selber ist schon alt vor 11 12 14 15 Jahren langer Zeit haben wir diese Technik zum schützen unser Bilder verwendend. Und schon kann es losgehen. Als erstes müssen wir festlegen wie groß die geschnittene Grafik sein soll. In meinen Fall 100×100 Pixel, also legen wir eine CSS Klasse mit folgenden Werten an.

.thumb {
    width:  100px;
    height: 100px;
    background-position: center center;
}

Als nächstes letztes müssen wir die Div-Box basteln, dass entscheidende dabei sind ist das innerhalb der Box das Transparente gif ist, welches genauso groß sein muss wie die Div-Box und die Div-Box muss als Hintergrund das Thumbnail zugewiesen bekommen (Der Link ist natürlich Optional).

<div class="thumb" style="background-image: url(URL-ZUM-THUMBNAIL);">
  <a href="WAS-AUCH-IMMER"><img src="pixel.gif" alt="" width="100px" height="100px" /></a>
</div>

PS: Man kann auch jede andere möglich und unmögliche Größe für den Ausschnitt verwenden, wichtig dabei ist nur, dass das Thumbnail auch entsprechend groß ist.

Bootstrap

onclick ausblenden eines DIV-Containers

<button type="button" class="close" data-target="#id_of_panel" data-dismiss="alert">
        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>