Nachdenken des Suchlayouts von Google Images mit CSS

Key Takeaways

• Das Image -Suchlayout von Google beinhaltet das Erstellen einer grundlegenden HTML -Struktur für Bilder, das Styling mit CSS und das Hinzufügen von Funktionen mit JavaScript.
• Zu den wichtigsten CSS-Eigenschaften, die in diesem Prozess verwendet werden, gehören Anzeige, Grid-Template-Säulen, Gitterlücken und Objektfit. Diese Eigenschaften tragen dazu bei, ein Gitterlayout zu erstellen, die Anzahl und Größe der Spalten anzugeben, die Lücke zwischen Gitterzellen festzulegen und zu diktieren, wie ein Bild angepasst werden sollte, um seinen Behälter anzupassen.
• Das Layout kann so angepasst werden, dass individuelle Bedürfnisse angepasst werden. Dies umfasst das Ändern der Anzahl und Größe der Spalten im Netz, die Lücke zwischen Gitterzellen und die Größe der Bilder. Zusätzliche CSS -Eigenschaften können auch zur weiteren Anpassung hinzugefügt werden.
• Funktionalität kann den Bildern mit JavaScript hinzugefügt werden. Beispiele hierfür sind das Hinzufügen eines Ereignishörers zu den Bildern, die beim Klicken eine größere Version des Bildes öffnen, und das Hinzufügen von Funktionen wie Bildfilterung oder Sortierung.
• Das Layout kann durch Verwendung von Medienabfragen in CSS reagiert werden. Diese ermöglichen, je nach Größe des Benutzers unterschiedliche Stile anzuwenden, um sicherzustellen, dass die Bilder auf allen Geräten ordnungsgemäß angezeigt werden.

In einem Projekt, an dem ich kürzlich beteiligt war, wurde ich gebeten, die Funktionalität der Bildsuche von Google neu zu erstellen, ähnlich dem unten gezeigten Screenshot, jedoch in einem starren Gitterformat.

Meine sofortige Reaktion war, dass ich JavaScript verwenden müsste, um einige Layout- und Boxmodelleigenschaften festzulegen, zu denen ich immer nur ungern tun werde, und die ich immer nur als letztes Ausweg tun werde. Da es ein bereits perfekt funktionierendes Beispiel gab, habe ich mich entschlossen, Entwickler -Tools zu öffnen, um zu sehen, wie Google es macht (warum das Rad neu erfinden, oder?)

stellt sich heraus, dass Google die Struktur in zwei Divs unterteilt, ein Div enthält alle Bildzellen und das andere div ist für den expandierenden Bereich. Sobald ein Bild geklickt (und erweitert) ist, fügt JavaScript nach der letzten Bildzelle in der Zeile der geklickten Div eine Abstandsabstandsdiv ein. JavaScript setzt seine Höhe auf die gleiche wie die erweiterte DIV und positioniert die erweiterte Div in die Position, die der Abstandshalter -Div einnimmt. Dies ist klug, aber nicht ideal, da es stark auf JavaScript angewiesen ist.

Ich hatte eine grundlegende Idee, dass ich es geschafft habe, mich zu einer funktionierenden Demo zu entwickeln, die CSS für alle Layout- und Boxmodelleigenschaften verwendet. Das einzige JavaScript, das notwendig ist, besteht darin, Klassennamen basierend auf dem Erweiterungsschalter zu ändern.

Das grundlegende Markup

Zunächst müssen wir den .image-Grid-Behälter zusammen mit jedem .image__cell konstruieren. Hier ist die HTML:

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Das obige Markup enthält ein Beispiel .image -Zellelement, das für jedes Bild im Raster dupliziert werden muss. Bitte beachten Sie die Kennungen für #Close-Jump-1 und #Exct-Jump-1, und die nachfolgenden HREF-Attribute müssen für die .image__cell einzigartig sein. Hash-Links wie: href = "#Expination-Jump-1" Ermöglichen Sie, dass der Browser beim Drücken zur aktiven Bildzelle springen.

Das CSS

Zuerst wenden wir Box-Größen an: Border-Box; zu allen Elementen, einschließlich: vor und: nach Pseudoelementen mit dem Universal Selector. Dies ermöglicht eine einfache Handhabung von Elementen, die prozentuale Breiten mit festen Polsterwerten mischen, da sie kombiniert werden.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Das .image-Grid-Element erhält einen ClearFix-Überlauf: versteckt; Layout basierend auf der Bildzelle schwimmt.

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Die der Bildzelle angegebene Breite entspricht 100 geteilt durch die Anzahl der Elemente pro Zeile, die als Prozentsatz ausgedrückt werden. In diesem Beispiel gibt es 5 Elemente pro Reihe, was bedeutet, dass jeder .image__cell 20% breit ist.

Beachten Sie, dass Polsterung: 10px 5px 0; angewendet auf .image-Grid in Kombination mit Polsterung: 0 5px; auf .image-basisch und Höhe: 10px; auf .image__cell.is-collapsed .Arrow-up geben den gleichen Fensterrahmeneffekt um die gefliesten Bilder. Wir könnten die Lücke zwischen den Bildern erhöhen, indem wir diese Werte ändern.

Zuletzt wird das basic__img Bildelement angegeben: Block; Um Abstandsprobleme zu verhindern. Themax-width: 100%; und Höhe: Auto; Deklarationen ermöglichen es, dass das Bild die Breite seines Containers skaliert und seine eigene Breite nicht überschreitet.

Das folgende CSS liefert das Layout für den erweiterbaren Bereich.

<span><span>.image__cell.is-collapsed .image--basic</span> {
</span>  <span>cursor: pointer;
</span><span>}
</span>
<span><span>.image__cell.is-expanded .image--expand</span> {
</span>  <span>max-height: 500px;
</span>  <span>margin-bottom: 10px;
</span><span>}
</span>
<span><span>.image--expand</span> {
</span>  <span>position: relative;
</span>  <span>left: -5px;
</span>  <span>padding: 0 5px;
</span>  <span>box-sizing: content-box;
</span>  <span>overflow: hidden;
</span>  <span>background: #222;
</span>  <span>max-height: 0;
</span>  <span>transition: max-height .3s ease-in-out,
</span>              margin-bottom <span>.1s .2s;
</span>  <span>width: 500%;
</span><span>}</span>

Hier sind einige Notizen, die Sie aus dem obigen Code abnehmen können:

• Der Cursor ändert sich zu einem Zeiger, wenn er über .image schwebt-basisch, wenn er sich nur in einem zusammengebrochenen Zustand befindet. Dies gibt dem Benutzer einen visuellen Indikator, der auf das Bild klickt.
• Die maximale Höhe des .image-Expand-Elements wird in seinem Anfangszustand auf 0 gesetzt. Die maximale Höhe erhält einen Wert von 500 PX, wenn das .image-Zellelement die .IS-expandierte Klasse hat. Beachten Sie, dass der maximale Höhenwert auch erhöht werden müsste, damit der gesamte Bereich angezeigt werden muss, damit der gesamte Bereich angezeigt wird.
• Übergänge, die auf maximalhöhe und margin-bottom angewendet werden, ermöglichen einen Gleiteffekt, wenn der erweiterte Bereich umgeschaltet ist.

• Visuell möchten wir, dass sich der expandierende Bereich mit dem .image-Grid übereinstimmt. Dazu müssen wir die horizontale Polsterung im .image-Grid-Element negieren.

  1. Zunächst .image-Expand erhält eine Kastengröße: Content-Box; den Polsterwert aus seiner Breite auszuschließen.
  2. Das .image-Expand-Element hat eine Breite von 500%der 5-fachen seines übergeordneten Elements. Dies ermöglicht es dem erweiterten Bereich, die gesamte Breite des .image-Gitters abzüglich der Polsterung zu belegen.
  3. , um den verbleibenden Raum zu besetzen, das .image-Expand-Element erhält eine 5px-Polsterung nach links und rechts.
  4. Die Position: Relativ; und links: -5px-Deklarationen verschieben den erweiterten Bereich leicht nach links, um den .image-Grid-Polster-Links-Wert zu negieren.

Das clevere Bit

Wir wollen alle .image-Ausgaben nach links nach links mit der linken Seite des .image-Grids nach links verschieben. Dazu stellen wir je nach Position in der Reihe einen negativen Rand fest.

Hier kommt der Typ des Typs:

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Ich habe zunächst N-te-Kind verwendet, um den gleichen Effekt zu erzielen, aber bei anderen Projekten habe ich festgestellt, dass iOS8 Safari damit ziemlich fehlerhaft ist, damit ich versuche, es zu vermeiden. Stattdessen benutze ich den Typ n-vom-Typ, da es größtenteils den gleichen Zweck erfüllt. Wenn Sie interessiert sind, finden Sie hier eine kurze Erklärung des N-ten-Typs <.>

In den obigen CSS zielen wir auf die zweiten, dritten und vierten .image__Cell -Erweiterbaren Bereiche in jeder Reihe ab. Der Margen-Links-Wert hängt auch von der Position des Elements in der Zeile ab. Beachten Sie, dass das erste Element in jeder Zeile keinen Rand-Links-Wert benötigt, der bereits in der gewünschten Position liegt. Je weiter das Element von links ist, desto weiter müssen wir den erweiterbaren Bereich wieder auf die linke Seite drücken (in Schritten von -100%). Ohne dies würde der erweiterbare Bereich wie unten gezeigt auf seinen Elternteil ausgerichtet:

Wir müssen auch die unten gezeigten CSS einfügen, um sicherzustellen, dass die erste .image__cell in jeder Reihe, abgesehen von der ersten Reihe, an seiner Position haftet, wenn frühere .image__cell -Elemente erweitert werden.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Jetzt, da das grundlegende Layout vorhanden ist, können wir einige Stile hinzufügen, um die Benutzererfahrung zu verbessern.

Erstens ein aufstrebender Pfeil, um anzuzeigen, welches Bild der erweiterte Block gehört:

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Beachten Sie, dass der Pfeilstil durch Erstellen eines CSS -Dreiecks erreicht wird, wodurch eine HTTP -Anforderung gespeichert wird. Dieser Effekt ist leicht durch clevere Verwendung von Grenzen und die Höhe und Breite auf 0 zu erreichen.

Wir möchten auch, dass der Pfeil nur dann erscheint, wenn das .image__Cell -Element erweitert wird. Dies geschieht durch Hinzufügung der .IS-Expanded-Klasse. Schließlich möchten wir, dass der Pfeil in der horizontalen Mitte des .image__cell -Elements so Rand: 0 Auto; wird angewendet.

Jetzt sind wir bereit, die Schaltfläche „Schließen“ zu stylen, mit der der Benutzer den erweiterten Bereich schließen kann.

<span><span><span><section</span> class<span>="image-grid"</span>></span>
</span>  <span><span><span><div</span> class<span>="image__cell is-collapsed"</span>></span>
</span>    <span><span><span><div</span> class<span>="image--basic"</span>></span>
</span>      <span><span><span><a</span> href<span>="#expand-jump-1"</span>></span>
</span>        <span><span><span><img</span> id<span>="expand-jump-1"</span> 
</span></span><span>                 <span>class<span>="basic__img"</span>
</span></span><span>                 <span>src<span>="https://lorempixel.com/250/250/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>      <span><span><span></a</span>></span>
</span>      <span><span><span><div</span> class<span>="arrow--up"</span>></span><span><span></div</span>></span>
</span>    <span><span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="image--expand"</span>></span>
</span>      <span><span><span><a</span> href<span>="#close-jump-1"</span> class<span>="expand__close"</span>></span><span><span></a</span>></span>
</span>      <span><span><span><img</span> class<span>="image--large"</span> 
</span></span><span>           <span>src<span>="https://lorempixel.com/400/400/fashion/1"</span> alt<span>="Fashion 1"</span>></span>
</span>    <span><span><span></div</span>></span>
</span>  <span><span><span></div</span>></span>
</span>  ...
<span><span><span></section</span>></span></span>

Beachten Sie, dass wir durch Verwendung von A: Vor dem Pseudoelement ein „ד -Schapon auf die Seite einfügen können, ohne dass es im DOM angezeigt wird, wodurch mindestens eine HTTP-Anforderung gespeichert wird. Das eingefügte Spezialzeichen ist das Multiplikationszeichen, das auch Boostrap verwendet.

die jQuery

Schließlich wechselt die folgende jQuery einfach zwischen den .IS-expandierten und .is-collapsed-Klasse auf Klick auf jede Bildzelle und schließen.

<span>/* apply a natural box layout model to all elements,
</span><span>   but allowing components to change */
</span>
<span>html {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>*<span>, *:before, *:after</span> {
</span>  <span>box-sizing: inherit;
</span><span>}</span>

Natürlich können Sie JQuery ganz einfach vermeiden, indem Sie `classlist ()` und andere native Techniken verwenden, aber Sie würden nicht so tiefe Browser -Unterstützung erhalten, es sei denn, Sie wären bereit zu Polyfill.

Das Netz reagiert

Es ist nicht ideal, 5 Bildzellen in jeder Zeile auf kleineren Geräten zu haben. Daher können wir die Anzahl der Elemente pro Zeile mithilfe von Medienabfragen ändern. Zum Beispiel reduziert das folgende CSS es auf 2 Bilder pro Zeile.

<span><span>.image-grid</span> {
</span>  <span>width: 100%;
</span>  <span>max-width: 1310px;
</span>  <span>margin: 0 auto;
</span>  <span>overflow: hidden;
</span>  <span>padding: 10px 5px 0;
</span><span>}
</span>
<span><span>.image__cell</span> {
</span>  <span>float: left;
</span>  <span>position: relative;
</span>  <span>width: 20%;
</span><span>}
</span>
<span><span>.image--basic</span> {
</span>  <span>padding: 0 5px;
</span><span>}
</span>
<span><span>.basic__img</span> {
</span>  <span>display: block;
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>margin: 0 auto;
</span><span>}
</span>
<span><span>.image__cell.is-collapsed .arrow--up</span> {
</span>  <span>display: block;
</span>  <span>height: 10px;
</span>  <span>width: 100%;
</span><span>}
</span>
<span><span>.image--large</span> {
</span>  <span>max-width: 100%;
</span>  <span>height: auto;
</span>  <span>display: block;
</span>  <span>padding: 40px;
</span>  <span>margin: 0 auto;
</span>  <span>box-sizing: border-box;
</span><span>}</span>

Um zu verhindern, dass CSS früher in Bezug auf 5 Elemente pro Zeile angewendet wird, müssen wir diese Werte entweder zurücksetzen oder die Eigenschaften extrahieren und zusammen mit dem vorherigen Code in ihre eigene Medienabfrage, die im folgenden Codepen durchgeführt wird, einsetzen.

Siehe die Suche von Pen Google Images in CSS von SitePoint (@sinepoint) auf CodePen.

Beachten Sie die Einbeziehung der Zellenfunktion, die 50 Bildzellen ausspuckt, um mir die Mühe zu retten.

für Sass -Liebhaber

Ich wollte Leser nicht ausschließen, die beim Schreiben dieses Artikels nicht SASS verwenden, aber ich wollte sie auch nicht ergeben. Dieses Projekt eignet sich als großartiger Anwendungsfall für SASS in der Entwicklung, da die Anzahl der Elemente pro Zeile mit so vielen verschiedenen Eigenschaften zusammenhängt.

Siehe die folgende alternative Codepen -Demo. Beachten Sie, dass ich in dieser Demo SASS -Variablen oben auf dem CSS verwende, sodass ich die Lücke zwischen den Bildern, der maximalen Bildbreite und den minimalen und maximalen Bildern pro Zeile angeben kann. Unter Verwendung verschiedener Berechnungen kompiliert der SASS basierend auf den bereitgestellten Optionen in CSS. Es wird automatisch die optimalen Medienabfragen basierend auf der maximalen Anzahl von Elementen pro Zeile berechnet, wodurch die Bilder in ihren maximalen Abmessungen gehalten werden.

Diese SASS -Version ist experimentell, aber bitte lassen Sie mich wissen, ob Sie Fehler oder potenzielle Codeverbesserungen in der regulären Version oder in der SASS -Version bemerken.

häufig gestellte Fragen (FAQs) zum Nachdenken von Google Images -Suchlayout mit CSS

Wie kann ich das Suchlayout von Google Images mit CSS neu erstellen? Zunächst müssen Sie eine grundlegende HTML -Struktur für Ihre Bilder erstellen. Dies beinhaltet das Erstellen eines DIV für jedes Bild und das Zuweisen einer Klasse. Als nächstes müssen Sie diese Divs mit CSS stylen, um das Layout von Google -Bildern nachzuahmen. Dies beinhaltet die Festlegung der Breite und Höhe der Divs sowie deren Position auf der Seite. Mit CSS können Sie den Bildern auch Schwebeffekte hinzufügen. Schließlich können Sie JavaScript verwenden, um den Bildern Funktionen hinzuzufügen, z. B. das Öffnen einer größeren Version des Bildes beim Klicken.

Zu den wichtigsten CSS-Eigenschaften, die zum Nacherrichten des Google Images-Layouts verwendet werden, gehören Anzeige, Grid-Template-Säulen, Raster-Lücke und Objektanpassungen. Die Anzeigeeigenschaft ist auf das Netz eingestellt, um ein Netzlayout zu erstellen. Die Eigenschaft mit Raster-Template-Säulen wird verwendet, um die Anzahl und Größe der Spalten im Raster anzugeben. Die Gitter-Gap-Eigenschaft wird verwendet, um die Lücke zwischen den Gitterzellen zu setzen. Die Objekt-Fit-Eigenschaft wird verwendet, um anzugeben, wie ein Bild so geändert werden soll, dass er seinen Container entspricht.

Kann ich das Layout so anpassen um Ihren eigenen Bedürfnissen zu entsprechen. Sie können die Anzahl und Größe der Säulen im Gitter, die Lücke zwischen den Gitterzellen und die Größe der Bilder ändern. Sie können auch zusätzliche CSS -Eigenschaften hinzufügen, um das Layout weiter anzupassen, z. B. Hinzufügen von Rändern oder Schatten zu den Bildern. Bilder mit JavaScript. Sie können beispielsweise den Bildern einen Ereignishörer hinzufügen, der eine größere Version des Bildes öffnet, wenn es klickt. Sie können auch Funktionen wie Filtern oder Sortieren der Bilder hinzufügen. mehrere Gründe sein. Stellen Sie zunächst sicher, dass Sie die CSS -Eigenschaften korrekt implementiert haben. Zweitens prüfen Sie, ob Ihre Bilder das gleiche Seitenverhältnis haben. Google Images verwendet Bilder mit demselben Seitenverhältnis, um ein einheitliches Layout zu erstellen. Wenn Ihre Bilder unterschiedliche Seitenverhältnisse haben, sieht das Layout möglicherweise nicht gleich aus.

Wie kann ich mein Layout reagieren? . Mit Medienabfragen können Sie je nach Größe des Benutzers unterschiedliche Stile anwenden. Sie können beispielsweise die Anzahl der Spalten im Raster auf kleineren Bildschirmen ändern, um sicherzustellen, dass die Bilder weiterhin ordnungsgemäß angezeigt werden.

Kann ich dieses Layout für andere Arten von Inhalten verwenden, nicht nur für Bilder? Sie können es verwenden, um Text, Videos oder andere Inhaltsart anzuzeigen. Stellen Sie einfach sicher, dass Sie die CSS -Eigenschaften entsprechend an die angezeigte Art des Inhalts einstellen. Die: Hover Pseudo-Klasse in Ihrem CSS. Sie können beispielsweise die Grenzfarbe des Bildes ändern, wenn der Benutzer darüber hinweg hebt, oder Sie können zusätzliche Informationen über das Bild anzeigen.

Wenn Ihre Bilder nicht richtig in die Gitterzellen passen, kann dies daran liegen, dass das Seitenverhältnis der Bilder nicht das gleiche wie das Seitenverhältnis der Gitterzellen ist. Sie können dies beheben, indem Sie die Objekt-Fit-Eigenschaft in Ihrem CSS verwenden, um anzugeben, wie die Bilder angepasst werden sollen, um ihren Container anzupassen. Ja, Sie können dieses Layout mit einem CMS wie WordPress verwenden. Sie müssten die CSS in die Style.css -Datei Ihres Themas und die HTML zur entsprechenden Vorlagendatei hinzufügen. Möglicherweise müssen Sie auch einen PHP -Code hinzufügen, um die HTML für die Bilder dynamisch zu generieren, je nachdem, wie Ihre WordPress -Site eingerichtet ist.

Das obige ist der detaillierte Inhalt vonNachdenken des Suchlayouts von Google Images mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!