it-swarm.com.de

Reine CSS-Miniaturbilder

Ich möchte eine Sammlung von Bildminiaturen in einem Raster anzeigen. Die Bilder werden in verschiedenen Größen vorliegen, aber ich möchte die Miniaturbilder auf eine bestimmte Größe beschränken (sagen wir 200px weit und 150px groß).

Was ich gerne finden würde, sind magische HTML-Markup- und CSS-Regeln

  1. Lassen Sie zu, dass die Bilder in normale <img>-Elemente aufgenommen werden
  2. Stellen Sie sicher, dass die Miniaturbilder in ihre 200x150-Pixel-Box passen, ihre Proportionen beibehalten und in der Dimension zentriert sind, in der sie überlaufen.
  3. Kein JavaScript oder spezielles Wissen über die tatsächlichen Abmessungen jedes Bildes erforderlich

Ich bin mir nicht sicher, ob das möglich ist. Ich kann mit dem folgenden Markup eine (schlechte) Annäherung dessen machen, was ich will:

<div class="thumb">
    <img src="360x450.jpeg">
</div>

und CSS:

.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}

Dieser Versuch kann auf verschiedene Weise unterbrochen werden:

  1. Bilder, die sich im Hochformat befinden, haben eine korrekte Größe, werden jedoch durch den Boden des Containers überlaufen, was zu einem vertikal nicht zentrierten Beschnitt führt.

  2. Breite und kurze Bilder werden aufgrund der hartcodierten width- und min-height-Regeln in der horizontalen Dimension verzerrt.

  3. Ohne diese hartcodierte width werden Bilder, die größer als die minimale Höhe und Breite sind, nicht in der Größe verändert.

Wenn es hilfreich ist, habe ich ein Beispiel angeführt, das (hoffentlich) veranschaulicht, was ich hier versuche:

Ich weiß, dass ich dieses Problem lösen kann, indem ich das <img> -Element ganz weglasse und stattdessen die Miniaturansichten als zentriertes Hintergrundbild auf das enthaltende Element ziehe. Wenn es möglich ist, möchte ich die <img>-Elemente auf der Seite behalten.

Vielen Dank für jede Hilfe oder Hinweise, die Sie anbieten können!

Edit: Ich nehme an, ich sollte beachten, dass eine ideale Lösung in IE 6+ und modernen Browsern funktioniert, aber jede Lösung, die in IE 9+ und anderen funktioniert Moderne Browser (aktuelles WebKit, Gecko etc.) werden gerne angenommen.

17
Will McCutchen

Möglicherweise wahrscheinlich.

Wahrscheinlich auch nicht die beste Idee. Ihr großes Problem, das Sie hier überwinden müssen, ist die Ausrichtung der Miniaturbilder. Was ist, wenn Sie sich mit einem Panorama beschäftigen? Ein Verkleinern führt sicherlich zu einem sehr unansehnlichen "zerquetschten" Bild, genauso wie ein sehr großes Bild. Es ist selten, dass jeder zu 100% mit 4X3 oder 16X9 handelt. Sie benötigen also einen Mechanismus, um das Bild auszufüllen. Selbst wenn das Verhältnis korrekt ist, wird die Größe nicht so sauber geändert wie mit einem Programm wie Photoshop oder Gimp.

Das andere große Problem bei diesem Gedankengang ist, dass Sie riesige Mengen unnötiger Daten über die größeren Bilder an den Server senden werden. Das Laden dauert länger, das DOM wird unnötig aufgefüllt, und insgesamt wird die Benutzeroberfläche einfach gehemmt.

Es gibt mehrere Möglichkeiten, dies zu umgehen, keine davon ist reines CSS. Ich habe dies mehrmals angegangen, und zwar jeweils auf unterschiedliche Weise, basierend auf dem Client. Für einen Kunden, der Dinge ganz nach Kundenwunsch wollte, war es ein benutzerdefinierter Uploader, dessen Größe über iMagick (Teil von Image Magic) und benutzerdefiniertes CSS/Javascript für das Album mit größerer Interaktivität geändert wurde. In einem anderen Fall verwende ich Gallery als Backend - die Erstellung der Miniaturansichten, das Hochladen, Betiteln, Beschneiden und Organisieren - und dann einfach die neu formatierten Bildverknüpfungen aus der DB gezogen, um sie ansprechender darzustellen Weise. Sie können sich noch mehr Mühe sparen und einfach etwas wie das Flickr-API verwenden, um Bilder für Ihre Verwendung zu ziehen.

Hier ist ein Tut on mit ImageMagick zum Erstellen von Thumbnails.

4
bpeterson76

Sie können dies (in gewisser Weise) mit den CSS3-Zusatzfunktionen background-size erreichen: contain und cover.

Live Demo

  • contain (oberes Bild) passt sich dem gesamten Bild an und behält das Seitenverhältnis bei. Nichts wird zugeschnitten.

  • cover (unteres Bild) füllt das enthaltende Element entweder vertikal oder horizontal (je nach Bild) und schneidet den Rest ab.

8
drudge
.thumb img {
    max-width: 200px;
    max-height: 150px;
    min-width: 200px;
    min-height: 150px;
}

Nun, ich weiß für Daumen, Sie würden es max und min wünschen, wenn Sie ein kleineres Bild wünschen, um es größer zu machen, und ein größeres Bild, um es kleiner zu machen.

1
buhbang

versuchen Sie, max-width und height und nicht min einzustellen, denn wenn das Bild nicht genau diese Größe hat, wird es überlaufen :)

0
cmplieger