Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht

Möglicherweise hatten Sie für diese Frage bisher keinen relevanten Bedarf oder diese Frage wurde Ihnen in einem Vorstellungsgespräch noch nicht gestellt, aber ich bin davon überzeugt, dass Sie irgendwann einen Bedarf haben werden.

Diese Frage ist alltäglich und ich stelle sie heute erneut in der Hoffnung, dass Sie eines Tages, wenn Ihnen diese Frage gestellt wird, in der Lage sein werden, eine schöne Antwort zu geben.

Wenn Sie eines Tages gefragt werden: „Können Sie mir sagen, wie ich ein Element mit einem festen Seitenverhältnis implementiere?“

Wenn Sie dies hören, dürfen Sie die Antwort nicht blind geben. Denn wenn Sie diese Frage stellen, ist die Frage nicht eindeutig. Damit können Sie dem Interviewer helfen, die Fragen zu ergänzen oder Rückfragen zur Bestätigung der Anforderungen stellen. Sie können wie folgt antworten:

Wenn die Größe des Elements bekannt ist, muss nicht viel gesagt werden. Berechnen Sie einfach die Breite und Höhe und schreiben Sie sie auf.

Wenn die Größe des Elements bekannt ist, muss nicht viel gesagt werden. Berechnen Sie einfach die Breite und Höhe und schreiben Sie sie auf. Wenn die Elementgröße unbekannt ist, ist JavaScript der einfachste Weg. Wenn Sie CSS verwenden, kann es in die folgenden Kategorien unterteilt werden:

• Wenn es sich um ein ersetztes Element <img> oder <video> handelt, wie wird es implementiert?
• Wenn es ein gemeinsames Element ist, wie sollte es implementiert werden?

Heute wird Waima mit Ihnen die oben genannten Situationen unter die Lupe nehmen.

Erstens ist die Elementgröße bekannt, daher wird diese übergeben. Natürlich habe ich Angst, dass Sie mich schlagen, wenn ich es Ihnen sage.

Wir konzentrieren uns auf den Fall, in dem die Elementgröße unbekannt ist .

Daher befasst sich dieser Artikel hauptsächlich mit der Frage, wie ein festes Seitenverhältnis für austauschbare und gewöhnliche Elemente erreicht werden kann.

1. Austauschbare Elemente zur Erzielung eines festen Seitenverhältnisses

Ersetzte Elemente (wie etwa <img> und <video> ) unterscheiden sich von anderen Elementen dadurch, dass sie ein Konzept der Pixelbreite und -höhe haben. Wenn Sie also für diesen Elementtyp ein festes Seitenverhältnis erreichen möchten, ist das relativ einfach.

Wir können den Breiten- oder Höhenwert angeben und die andere Seite berechnet ihn automatisch .

Wie folgt fixieren wir die Breite des Bildelements und machen die Höhe adaptiv:

<div Klasse="img-wrapper">
  <img src="https://p3.ssl.qhimg.com/t01f7d210920c0c73bd.jpg" alt="">
</div>

.img-wrapper {
  Breite: 50vw;
  Rand: 100px automatisch;
  Polsterung: 10px;
  Rand: 5px, durchgehend helles Lachsrosa;
  Schriftgröße: 0;
}

img {
Breite: 100 %;
Höhe: automatisch;
}

Der Effekt ist in der folgenden Abbildung dargestellt. Es ist ersichtlich, dass sich das Bild mit der weiteren Vergrößerung des sichtbaren Bereichs ebenfalls vergrößert, während die ursprünglichen Proportionen erhalten bleiben.

Möglicherweise ist Ihnen nicht aufgefallen, dass wir beim img Element height: auto; setzen. Dies soll verhindern, dass Entwickler oder Content-Management-Systeme dem Bild im HTML-Quellcode ein height hinzufügen. Auf diese Weise kann es überschrieben werden, um Fehler zu vermeiden.

Darüber hinaus ist das video ähnlich. Sie können es ausprobieren und der Effekt ist wie folgt.

2. Gemeinsame Elemente erreichen ein festes Seitenverhältnis

Obwohl wir oben für die ersetzten Elemente ein festes Seitenverhältnis erreicht haben, liegt dieses Verhältnis hauptsächlich daran, dass die ersetzten Elemente selbst Größen haben und dieses Verhältnis auch durch das ursprüngliche Größenverhältnis begrenzt ist. Dies ist offensichtlich nicht flexibel. Wie erreichen wir also ein festes Seitenverhältnis für normale Elemente?

Schauen wir uns zunächst die klassischste Hack-Methode padding-bottom/padding-top .

2.1 padding-bottom realisiert ein festes Seitenverhältnis gemeinsamer Elemente

Im vorherigen Begleitkapitel „CSS beherrschen“, Kapitel 3, Sichtbares Formatierungsmodell, haben wir erwähnt, dass vertikale Innen- und Außenränder, wenn sie als Prozentsätze verwendet werden, auf Grundlage der Breite des umgebenden Blocks berechnet werden.

Im Folgenden wird padding-bottom als Beispiel verwendet

Durch die Verwendung von padding-bottom können wir ein Element mit einem festen Breite-Höhe-Verhältnis realisieren, am Beispiel von div .

HTML:

<div Klasse="Wrapper">
  <div Klasse = "intrinsic-aspect-ratio-container"></div>
</div>

CSS:

.wrapper {
  Breite: 40vw;
}
.intrinsischer-Aspekt-Verhältnis-Container {
  Breite: 100 %;
  Höhe: 0;
  Polsterung: 0;
  Polsterung unten: 75 %;
  Rand: 50px;
  Hintergrundfarbe: Helllachs;
}

Die Wirkung ist wie folgt:

Wie im obigen Code gezeigt, setzen wir die Höhe div Elements 0 und verwenden padding-bottom um die Höhe der Box zu erweitern und ein festes Seitenverhältnis von 4/3 zu erreichen.

Dadurch wird ein festes Seitenverhältnis erreicht, es只是一個徒有其表的空盒子，里面沒有內容。如果想在里面放入內容，我們還需要將absolute Positionierung verwenden, um das Containerelement mit fester Größe mit dem Inhalt innerhalb des Div zu füllen.

wie folgt:

.intrinsisches-Aspektverhältnis {
  Position: relativ;
  Breite: 100 %;
  Höhe: 0;
  Polsterung: 0;
  Polsterung unten: 75 %;
  Rand: 50px;
  Hintergrundfarbe: Helllachs;
}
.Inhalt {
  Position: absolut;
  oben: 0;
  rechts: 0;
  unten: 0;
  links: 0;
}

Auf diese Weise können wir einen Container mit fester Größe implementieren, der mit Inhalt gefüllt werden kann.

Darüber hinaus können wir das Größenverhältnis auch mit calc() berechnen, was flexibler ist. Wir können schnell jedes beliebige Verhältnis schreiben, wie zum Beispiel padding-bottom: calc(33 / 17 * 100%); .

Ich weiß nicht, ob Sie bemerkt haben, dass mit der obigen Methode nur die Höhe mit der Breite verschoben werden kann, nicht aber die Breite mit der Höhe.

Gibt es eine Möglichkeit, die Breite mit der Höhe zu verändern? Die Antwort ist nein, zumindest nicht jetzt. Aber dies wird in Zukunft der Fall sein . Schauen wir uns als Nächstes eine andere, einfachere und bequemere Möglichkeit an.

2.2 aspect-ratio gibt das Seitenverhältnis eines Elements an

Da die Notwendigkeit eines festen Seitenverhältnisses schon lange besteht, ist das Hacken mit padding-bottom nicht intuitiv und erfordert die Verschachtelung von Elementen.

Um dieses Problem zu vermeiden, arbeitet die CSS-Arbeitsgruppe des W3C bereits an der Implementierung einer solchen Eigenschaft aspect-ratio . Der Plan wurde vorgeschlagen, aber noch hat ihn kein Browser implementiert. Er befindet sich noch in der Entwurfsphase und es gibt noch keinen veröffentlichten Arbeitsgruppenentwurf, nur einen Redaktionsentwurf.

Dies hindert uns jedoch nicht daran, diese neue Technologie vorab kennenzulernen.

Schauen wir uns an, wie praktisch es ist.

Das Syntaxformat des aspect-ratio ist wie folgt: aspect-ratio: <widtu-ratio>/<height-ratio> .

Wie unten gezeigt, können wir width oder height auf auto setzen und dann aspect-ratio angeben. Die anderen Werte ändern sich automatisch proportional.

/* Höhenverfolgung */
.box1 {
  Breite: 100 %;
  Höhe: automatisch;
  Seitenverhältnis: 16/9;
}

/*Breitenverfolgung*/
.box2 {
Höhe: 100%;
Breite: automatisch;
Seitenverhältnis: 16/9;
}

Mit dieser Technik können Sie sehr flexibel ein festes Seitenverhältnis für ein Element erreichen, und es kann entweder die Breite oder die Höhe angegeben werden. Es fehlt lediglich noch die Browserimplementierung, also freuen wir uns gemeinsam darauf.

Abschluss

In diesem Artikel wird zusammengefasst, wie Sie ein festes Seitenverhältnis für Elemente erreichen. Wenn Ihnen diese Frage im Vorstellungsgespräch gestellt wird. So können Sie antworten.

Wenn die Größe des Elements bekannt ist, muss nicht viel gesagt werden. Berechnen Sie einfach die Breite und Höhe und schreiben Sie sie auf.

Wenn die Elementgröße unbekannt ist, ist JavaScript der einfachste Weg. Wenn Sie CSS verwenden, gibt es mehrere Möglichkeiten:

• Wenn es sich um ein ersetztes Element <img> oder <video> handelt, können Sie eines width / height festlegen und das andere auf auto setzen, und das ersetzte Element wird entsprechend seiner intrinsischen Größe geändert.
• Wenn es ein normales Element ist, können wir durch die Verwendung von padding-top / padding-bottom ein festes Seitenverhältnis simulieren, aber diese Methode ist nicht flexibel und kann nur die Höhe mit der Breite ändern. Die CSS-Arbeitsgruppe stellt nun aspect-ratio eine neue Lösung vor, mit der sich das Seitenverhältnis einfach angeben lässt, die allerdings bislang noch in keinem Browser implementiert ist. Ich gehe davon aus, dass diese Funktion in den Browsern in naher Zukunft schrittweise implementiert wird.

Wenn Ihre Antwort am Ende so ausfällt, haben Sie nicht nur die Fragenstellung des Lehrers verbessert und Lösungen für verschiedene Situationen bereitgestellt, sondern auch auf die neue Lösung hingewiesen, die im Standard formuliert wird. Eine solche Antwort zeugt nicht nur von Ihrer gewissenhaften Auseinandersetzung mit der Problematik, sondern zeigt auch, dass Sie bei der Formulierung von Standards stets auf der Hut sind, was ein großes Plus ist. In diesem Fall kann ich nur sagen, dass Sie sich einen Platz bei diesem Vorstellungsgespräch gesichert haben.

Referenzlinks

Seitenverhältnis-Boxen

Entwerfen einer Seitenverhältniseinheit für CSS

CSS-Box-Sizing-Modul Stufe 4

Dies ist das Ende dieses Artikels über die Frage des Interviewers, wie man ein festes Seitenverhältnis in CSS erreicht. Weitere relevante Inhalte zu CSS mit festem Seitenverhältnis finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!