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!