HTML∕XML∕CSS

Aus MrBlackRocket
Zur Navigation springen Zur Suche springen

Quadratische Vorschaubilder mit css realisiert.

Oder Suchmaschinenfreundlich in Englisch, „cropped square images with css“. emoticon-wink 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[1]. 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[2].

.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>
  1. damals noch mit Tabellen
  2. Wichtig ist „background-position“, damit wird festlegt welcher Bildausschnitt zusehen sein soll