Aktuelle Version: 5.4.19 (Change Log)
Release Datum: June 1st, 2022
Download AJAX-ZOOM Software

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

Gepostet am 2019-01-15

Ein häufiger Fehler bei der Integration des AJAX-ZOOM-Viewers in ein responsives Layout besteht darin, dass der übergeordnete Container keine Höhe aufweist. Sie wird beim Aufbau der HTML-Seite von Browsern berechnen. Dies kann zu unerwarteten Ergebnissen führen. Der Viewer ist dann unter Umständen nicht sichtbar oder er bricht aus dem vorhandenen Layout aus. In diesem Beitrag werden die Wurzeln des Problems erläutert, sowie Problemumgehungen vorgeschlagen, die ebenfalls innerhalb der regulären AJAX-ZOOM Beispielseiten angewandt werden.

Die Hauptwurzel der Verwirrung besteht darin, dass der responsive AJAX-ZOOM Viewer von sich aus weder Breite noch Höhe aufweist. Anders als beispielsweise bei einem Bild Element, passt sich der Viewer an den übergeordneten Container an und nicht umgekehrt. Es ist so, als ob Sie bei einem untergeordneten Element die Höhe und Breite auf 100% setzen. Die 100% sind relativ zu dem Übergeordneten Container und wenn bei ihm die Abmessungen, vor allem die Höhe, fehlen, dann kann der Browser auch die Abmessungen des untergeordneten Elements nicht berechnen.

Problematisch dabei ist meistens die Angabe der Höhe bzw. die vom Browser berechnete Höhe. Denn in der Praxis, haben alle HTML-Elemente in die Sie den Viewer reinsetzen würden, eine berechnete Breite. Auch wenn diese leer sind. Die Höhe ergibt sich jedoch je nach dem Inhalt eines Containers. Das ist natürlich nicht immer so, aber mit Polyfills wie „clearfix“ ist dies auch bei schwierigen Fällen lösbar.

Nun ist es aber so, dass wie eingangs erläutert der AJAX-ZOOM Viewer versucht sich an das Eltern-Element anzupassen. Daher muss bei dem Eltern-Element die Höhe irgendwie festgelegt werden, damit AJAX-ZOOM diese auslesen und entsprechend die eigene Höhe setzen kann.

Bevor fortgefahren wird, ist es sinnvoll, den Unterschied zwischen responsiven und adaptiven Layouts zu definieren. Die simplifizierten Definitionen können im Vergleich zu detaillierten und gut ausgearbeiteten Artikeln ungenügend erscheinen. Für den Zweck des Themas sind sie jedoch ausreichend.

  • Responsiv bedeutet in unserem Sinne also, dass ein Element seine Dimensionen fließend anpasst.
  • Ein adaptiver Container ändert die Abmessungen durch die vordefinierten Haltepunkte innerhalb eines Intervalls.

CSS bietet hierfür die "Media Queries" an. Auf der aktuellen Seite, die Bootstrap-CSS verwendet, ist beispielsweise die .container CSS-Klasse adaptiv, jedoch z.B. die .col-md-6 CSS-Klasse für eine Spalte innerhalb der .row Klasse, responsiv.

Bei der folgenden Ausführungen spielt es keine Rolle, ob es sich um einen 360-Produkt-Viewer oder Bildzoom Viewer handelt.

Visualisierung des Problems, wenn die CSS-Höhe fehlt und nicht berechnet ist

Die Größe des Containers mit der ID example_container_1 beträgt NaN px.

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.

Festlegen einer adaptiven CSS-Höhe

Die Größe des Containers mit der ID example_container_2 beträgt NaN px.

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;
							}
						}
					
				

Festlegen einer responsiven CSS-Höhe mit CSS-Viewport-Einheiten

Die Größe des Containers mit der ID example_container_3 beträgt NaN px.

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.

Feste CSS-Höhe mit responsiver CSS-Maximalhöhe (max-height)

Die Größe des Containers mit der ID example_container_4 beträgt NaN px.

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.

Festlegen einer responsiven CSS-Höhe zum Erzielen bestimmter Proportionen / Seitenverhältnisse des übergeordneten Containers nur mit CSS

Die Größe des Containers mit der ID example_container_5 beträgt NaN px.

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.

Erstellen eines responsiven Containers mit festem Seitenverhältnis und begrenzen der Höhe mithilfe von CSS und JavaScript

Die Größe des Containers mit der ID example_container_6 beträgt NaN px.

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.

Comments (1)

Yermo 2019-12-11 18:09:56
Yermo Thank you for taking the time to write this article. This is the most thorough explanation of this topic I have been able to find anywhere on the web and is of great help.

Vielen dank!

-- Yermo

Leave a Comment

Looking for a place to add a personal image? Visit www.gravatar.com to get Your own gravatar, a globally-recognized avatar. After you're all setup, your personal image will be attached every time you comment.

Um Live-Support-Chat nutzen zu können wird Skype vorausgesetzt.

Sollte Live-Support-Chat über Skype nicht sofort zu erreichen sein, dann hinterlassen Sie bitte im Skype eine Nachricht oder schreiben Sie uns eine Email über die Kontakt Seite.

Jede Anfrage wird beantwortet!

Live-Support-Chat