Das smarte Einstellen der Höhe und Proportionen des übergeordneten AJAX-ZOOM HTML-Containers im responsiven Layout

Links oder oben in diesem Text sollte sich ein farbiger Behälter befinden.

					
						.example_container_1 {
							position: relative;
							height: 100%;
						}
					
				

Obwohl die CSS-Höhe des Containers, der als übergeordneter Container für AJAX-ZOOM gedacht ist, 100% beträgt, ist er nicht sichtbar. Der Container befindet sich in dieser vereinfachten HTML-Struktur:

					
						<div class="row">
							<div class="col-md-6">
								<div class="example_container_1" id="example_container_1">
								</div>
							</div>
							<div class="col-md-6">
								Text...
							</div>
						</div>
					
				

Die Höhe von col-md-6 ist in keiner Weise festgelegt, daher ist die Einstellung der Höhe von 100% für example_container_1 sinnlos. Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden.

Wie Sie sehen können, wird der Viewer in der aktuellen AJAX-ZOOM-Version geladen und ist sichtbar! Der einzige Grund für das Laden ist jedoch, dass AJAX-ZOOM die fehlende Höhe des übergeordneten Containers erkennt und eigenständig einen Pixelwert festlegt. Sonst wäre der Viewer überhaupt nicht sichtbar. Aus diesem Grund entscheiden einige Entwickler, dass sie eine AJAX-ZOOM Option oder den Kerncode von AJAX-ZOOM ändern müssen, um dieses Verhalten zu ändern.

In der Tat wäre das möglich. Jedoch ist die in diesen Fall verantwortliche $zoom['config']['picDim'] Option nicht dazu gedacht die tatsächliche Höhe des Viewers in einer responsiven Umgebung zu ändern. Wenn keine berechnete Höhe vorliegt, nimmt AJAX-ZOOM den Höhenwert dieser Option und legt damit die Höhe des Containers fest. Das macht den Betrachter weder responsiv noch adaptiv.

Versuchen Sie bitte NICHT, den Wert der $zoom['config']['picDim'] Option zu ändern, nur um dieses Problem zu beheben. Auch versuchen Sie bitte NICHT, es variabel zu machen, indem Sie einen Parameter an die AJAX-ZOOM Konfigurationsdatei übergeben. Das ist ein falscher Ansatz! Stattdessen sollten Sie dem übergeordneten Container gleich eine Höhe zuweisen, indem Sie CSS oder JavaScript verwenden.

In dem Zusammenhang ist es wichtig zu verstehen, dass AJAX-ZOOM die Höhe des übergeordneten Containers nur in Ausnahmefällen als letzten Ausweg einstellt. Dies geschieht durch Hinzufügen der Höhe zum style-Attribut. Dies ist "stark" in dem Sinne, dass dadurch Regeln in CSS-Klassen überschrieben werden, die an einer anderen Stelle definiert sind. Zusätzlich zu den oben beschriebenen Problemen kann das Festlegen einer statischen Höhe zu einem Problem werden, wenn sich der Inhalt des übergeordneten Containers ändert, z.B. von Standardbildern zu AJAX-ZOOM 360-Viewer und zurück. Ein wahrscheinliches Ergebnis ist, dass Benutzer nach dem Umschalten ein fehlerhaftes Layout erhalten werden.

Der Container links (oder auf schmalen Bildschirmen oben) hat eine berechnete Höhe. Im Gegensatz zum obigen Beispiel ist es sofort sichtbar. Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden.

Die HTML-Struktur ist dieselbe wie im obigen Beispiel.

					
						<div class="row">
							<div class="col-md-6">
								<div class="example_container_2" id="example_container_2">
								</div>
							</div>
							<div class="col-md-6">
								Text...
							</div>
						</div>
					
				

Es hat jedoch eine festgelegte Höhe von 400px. Darüber hinaus enthält das CSS @media Abfragen. Je nach Breite und Höhe des Ansichtsfensters ändert sich die Höhe. Wenn Sie mit dieser Lösung arbeiten, sollten Sie Ihre eigenen Regeln erstellen, die zu Ihrem Layout passen.

Ändern Sie die Größe des Browsers, um zu überprüfen, ob sich die Größe des übergeordneten Containers ändert und der AJAX-ZOOM-Viewer entsprechend angepasst wird.

					
						.example_container_2 {
							position: relative;
							width: 100%;
							height: 400px;
						}

						@media (min-width: 992px) and (min-height: 768px) {
							.example_container_2 {
								height: 300px;
							}
						}

						@media (min-width: 1023px) and (min-height: 768px) {
							.example_container_2 {
								height: 450px;
							}
						}

						@media (min-width: 1679px) and (min-height: 992px) {
							.example_container_2 {
								height: 500px;
							}
						}

						@media (max-height: 480px) {
							.example_container_2 {
								height: 300px;
							}
						}
					
				

Wie eingangs differenziert, passt ein responsives Element seine Abmessungen fließend an. Die Fluideinstellung in diesem Beispiel bezieht sich nur auf die Höhe, da das Layout dieser Seite im Wesentlichen adaptiv ist.

					
					.example_container_3 {
						position: relative;
						width: 100%;
						height: 400px;
						height: 50vh;
						min-height: 300px;
						max-height: 545px;
					}
					
				

Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden.

Heutzutage werden die Viewport-Einheiten (vw, vh, vmin, vmax) weitgehend von allen Browsern unterstützt. Die vh Einheit bedeutet 1/100 von der Höhe des Ansichtsfensters. Mit anderen Worten ist dies ein Prozentwert relativ zur Höhe des Browser-Innenfensters.

In der obigen CSS Regelsatz beträgt die Höhe also 50% von der Höhe des Fensters. Die minimalen und maximalen Höhen sind auf feste Pixelwerte beschränkt, dies ist jedoch optional. Natürlich können Sie dem CSS auch @media Abfragen hinzufügen, um sie Ihrem Layout anzupassen.

Die Viewport-Einheiten können auch dazu verwendet werden, um die Höhe responsiv zu begrenzen. Dies ist nicht nur für den AJAX-ZOOM-Viewer praktisch, sondern auch für ein einfaches Bild, das als Ganzes sichtbar sein sollte. Der Container hat eine feste Höhe von 545 Pixeln, ist jedoch auf höchstens 75% der inneren Fensterhöhe des Browsers begrenzt. Verändern Sie die Größe des Browserfensters, um den Effekt zu sehen.

					
						.example_container_4 {
							position: relative;
							width: 100%;
							height: 545px;
							max-height: 75vh;
						}
					
				

Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden.

Alternativ besteht auch die Möglichkeit, die Viewport-Einheiten und die Pixelwerte zu mischen um die Höhe mit CSS zu berechnen.

					
						max-height: calc(90vh - 70px);
					
				

Das bedeutet, dass die Höhe des Containers nicht mehr als 90% der Innenfensterhöhe des Browsers minus 70 Pixel betragen sollte. Sowas ist sinnvoll, wenn Sie zum Beispiel eine Navigationsleiste haben, die immer oben im Fenster sichtbar ist und Sie deren feste Höhe zusätzlich abziehen möchten.

Die oben genannten Lösungen behalten keine festen Proportionen des Containers bei, die Sie möglicherweise abhängig vom Seitenverhältnis Ihrer Bilder festlegen möchten. Um dies zu erreichen, verfügt Bootstrap-CSS über .embed-responsive und .embed-responsive CSS-Klassen. Dazu müssen Sie jedoch nicht unbedingt die gesamte Bootstrap-CSS-Bibliothek verwenden. Alles, was dazu notwendig ist, sind drei CSS-Klassen zu definieren und sie auf die zwei verschachtelte Container anwenden.

					
						<div class="az_embed-responsive az_embed-responsive-test">
							<div class="az_embed-responsive-item" id="example_container_5">
							</div>
						</div>
					
				

Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden. Verändern Sie die Größe des Browser-Fensters, um zu sehen, dass die Proportionen des Kontainers beibehalten werden.

Das CSS für die drei Klassen sieht folgendermaßen aus:

					
						.az_embed-responsive {
							position: relative;
							box-sizing: border-box;
							width: 100%;
							height: 0;
							display: block;
							padding: 0;
							overflow: hidden;
						}

						.az_embed-responsive-item {
							box-sizing: border-box;
							position: absolute;
							top: 0;
							bottom: 0;
							left: 0;
							width: 100%;
							height: 100%;
							border: 0;
						}

						.az_embed-responsive-test {
							padding-top: 75%;
						}
					
				

Offensichtlich bedarf das Obige einer Erklärung, da die Höhe des .az_embed-responsive Containers auf 0px gesetzt ist. Was hier passiert, ist, dass dieser äußere Container eine zweite CSS-Klasse hat. Wir nennen diese Klasse az_embed-responsive-test. Die nativen Bootstrap-Klassen, die der Klasse ".az_embed-responsive-test" entsprechen, sind z.B. .embed-responsive-4by3, .embed-responsive-1by1 oder embed-responsive-21by9. Der Unterschied zwischen ihnen besteht nur in dem Wert des CSS padding-top, welches mit Prozentsatz als Einheit definiert ist. Aus einem zunächst schwer nachvollziehbaren Grund wird vom Browser ein innerer vertikal ausgerichteter Abstand im Container kreiert, welches sich auf die Breite desselben Elements bezieht. Wenn Sie padding-top auf 100% festlegen, erstellen Sie ein Quadrat (1:1 Verhältnis). Wenn Sie padding-top auf 50% festlegen, erstellen Sie ein Rechteck mit einem Seitenverhältnis von 2 zu 1. Der Grund dafür ist, dass innerhalb des CSS-"Box-Modells" die als Prozentsatz angegebene CSS-Margin und CSS-Padding basierend auf der BREITE desselben Element berechnet werden und diese Regel auch die vertikale Abstände betrifft!

Das Erstellen von vertikalen Padding alleine macht die Sache noch nicht aus. Sie können Ihren Inhalt nicht direkt in dieses Element einfügen und das Seitenverhältnis beibehalten, da die berechnete CSS-Höhe immer noch 0 Pixel beträgt. Der innere Container von .az_embed-responsive-item mit .az_embed-responsive-item CSS-Klasse macht den Trick, indem er absolut positioniert wird, eine Breite und Höhe von 100%, sowie obere und linke Koordinaten aufweist. Da das .az_embed-responsive relativ positioniert ist, werden die Grenzen des absolut positionierten untergeordneten Containers durch den obersten Container definiert. Und da es absolut positioniert ist, überlagert es die Fläche, die durch Padding entstanden ist. Auf diese Weise erhalten Sie einen inneren Container, in den Sie etwas platzieren können ohne das Seitenverhältnis des Gebildes zu beeinträchtigen.

Die obige Ausführung muss jedoch zu deren Verwendung nicht vollständig verstanden werden. Erstellen Sie einfach die verschachtelten DIV-Elemente und stellen Sie die padding-top auf das gewünschte Verhältnis ein. Bei einem Aspektverhältnis von z.B. 16:9, können Sie den Wert als 9/16 * 100 berechnen. Das sind 56,25%. Der Wert kann über 100% liegen. Für Porträts, z.B. 9:16 ist der Wert 16/9 * 100, was ungefähr 177,7778% ist. Sie können auch die CSS Funktion calc verwenden, um bestimmte UI-Elemente des Viewers zu berücksichtigen, die nicht responsiv sind, z.B.:

					
						.az_embed-responsive-test {
							padding-top: calc(56.25% + 48px);
						}
					
				

Ein wesentlicher Nachteil dieses Ansatzes ist, dass Sie die Höhe dieser Komposition nicht mit Standard-CSS einschränken können. Der äußere .az_embed-responsive Container hat immer noch eine berechnete Höhe von 0px. Daher kann die CSS-Eigenschaft max-height nicht auf ihn angewendet werden. Leider gibt es auch keine CSS-Eigenschaften wie min-padding oder max-padding. Sie können zwar die Höhe des inneren Containers mit .az_embed-responsive-item Klasse durch den CSS-Wert max-height beschränken, die Abmessungen werden jedoch nicht verringert bzw. der Raum, den der äußere Container für sich beansprucht, dadurch verringern. Wenn also die Begrenzung der CSS-Höhe für die maximale Höhe tatsächlich greift, erhalten Sie unter dem inneren Container mit dem tatsächlichen Inhalt viel Platz. Die JavaScript-Lösung im nächsten Abschnitt behebt dieses Problem.

Wie im letzten Paragraph des vorherigen Abschnitts beschrieben, gibt es keine einfache Möglichkeit, eine maximale Höhe für die Container festzulegen und den Seitenverhältnis beibehalten. Um dies zu erreichen, haben wir ein einfaches JavaScript-Plugin erstellt.

HTML und CSS sind dieselben wie im vorherigen Abschnitt, mit der Ausnahme, dass die .az_embed-responsive-test Klasse nicht vorhanden ist und der äußere Container mit der .az_embed-responsive Klasse über eine ID verfügt, um ihn von anderen Instanzen auf dieser Seite zu unterscheiden.

					
						<div class="az_embed-responsive" id="az_embed-responsive-js">
							<div class="az_embed-responsive-item" id="example_container_6">
							</div>
						</div>
					
				

Klicken Sie auf die Schaltfläche unten, um den AJAX-ZOOM-Viewer in diesen Container zu laden. Ändern Sie die Größe des Browser-Fensters, um zu bestätigen, dass die Proportionen gleich bleiben und jedoch abnehmen, wenn der sich aus der Höhe des Fensters ergebende Wert von 80% kleiner ist als die Höhe des Containers mit dem Viewer.

Im Gegensatz zu der vorherigen Lösung ist die CSS-Klasse .az_embed-responsive-test überflüssig und im HTML dieser Instanz nicht vorhanden, da das padding-top, das die Proportionen erzeugt, jetzt mit JavaScript festgelegt wird!

Die Begrenzung der Höhe des Viewers ist für die in Hochformat orientierten Bilder noch sinnvoller, was beispielsweise in der Modenische üblich ist. Wenn ein Benutzer willentlich zoomt und schwenkt, ist es was anderes, als wenn das angezeigte Bild zu groß ist und als Ganzes auf einem Bildschirm nicht sichtbar ist.

Unten finden Sie die Datei mit dem JavaScript-Plugin, die Sie einmal in Ihren HTML-Code aufnehmen müssen. Es verwaltet das Padding des äußeren Containers, und Sie können alle Grenzwerte festlegen, die bei der vorhergehenden Lösungen nicht ohne weiteres möglich waren.

					
						<!-- Helper plugin to deal with embed-responsive class -->
						<script type="text/javascript" src="/axZm/extensions/jquery.axZm.embedResponsive.js"></script>
					
				

Wie bei jedem jQuery-Plugin wird das jquery.axZm.embedResponsive Plugin auf einen Selektor angewandt. Hier ist der äußere Container mit der ID ajaxZoomContainerParent als Selektor gekennzeichnet. Es ist jedoch auf jede andere ID oder einen anderen Selektor anwendbar. Das Plugin ist Teil des AJAX-ZOOM-Pakets, sodass Sie es nicht separat herunterladen müssen.

					
						<script type="text/javascript">
						jQuery("#ajaxZoomContainerParent").axZmEmbedResponsive({
							// Aspect ratio e.g. 16:9
							ratio: '20:15',

							// Defines padding bottom, 100 results in 1:1 proportion
							prc: false,

							// Limit against the height of the browser window (%)
							heightLimit: 80,

							// Substract pixel value from heightLimit
							deduct: 20,

							// Minimal height of the container
							minHeight: 150,

							// Override options depending on window width
							maxWidthArr: [
								/*
								{
									maxWidth: 768,
									ratio: '1:1',
									prc: false,
									heightLimit: 80,
									deduct: 20,
									minHeight: 150,
								}
								*/
							]
						});
						</script>
					
				

Die Options ratio und prc sind nur alternative Möglichkeiten, um die Proportionen des Containers zu definieren. Sie können zwischen den beiden Optionen wählen. Zur Option maxWidthArr, bei der es sich um ein Array handelt, können Sie Objekte hinzufügen, die dieselben Hauptoptionen enthalten. Die zusätzliche Option maxWidth eines jeden zusätlichen Objektes definiert die Haltepunkte bzw. Breakpoints. Dies entspricht der Verwendung von beispielsweise @media (max-height: 768px) in CSS, was bedeutet, dass Sie CSS-Werte je nach Breite des Viewports des Browserfensters überschreiben können.

Sie können jQuery.axZmEmbedResponsive mehr als einmal auf einen Container anwenden, ohne ihn vorher zu zerstören. Das Plugin macht dies automatisch und selbst wenn der AJAX-ZOOM Viewer bereits im inneren Container vorhanden ist, passt er sich automatisch an die neuen Abmessungen an.