Ich habe mal etwas einfaches realisiert:
Eine Art quadratischen Rahmen definiert und die Bilder mit object-fit darin eingebettet. Und zwar so, dass jedes Bild vollständig sichtbar ist und nichts abgeschnitten wird. Dabei entstehen jetzt Leerräume, entwder seitlich oder oben und unten, je nach Orientierung. Sieh es dir mal an:
https://webentwicklung.ulrichbangert.de/thread363-swipe-images-2.html
Am einfachsten, wenn Du die beteiligten IDs in ein zweidimensionale Array einträgst und darüber eine Schleife legst. In der Schleife dann die Funktion myRange aufrufen mit den IDs als Parameter.
Alternative: Die drei beteiligten Elemente jeweils z. B. in einem Fieldset gruppieren. Dann eine Schleife über diese Fieldsets und jeweils die Berechnung durchführen.
PS: Mir scheint, ich habe das vorhin noch nicht richtig verstanden: Das Problem ist, dass das Skript vom Ende gesehen das erste Leerzeichen durch ein <br> ersetzt, so dass dort Zeilenumbrüche hinkommen, wo keine sein sollen. Wenn Du es nicht lösen kannst, melde dich wieder.
Verstehe, das ist natürlich ein Problem. Eine hundertprozentige Lösung wäre eine automatische Silbentrennung, aber das ist eine Wissenschaft für sich und nicht so auf die Schnelle zu machen. Vielleicht nur den Fall erkennen und dem Benutzer einen Hinweis geben, dass er manuell einen Umbruch einfügen soll?
Das ist zunächst mal kein Wunder. Ich nehme an, deine Bilder haben nicht alle das selbe Format. Ich werde es mir ansehen und versuchen, das CSS anzupassen.
Um sicher zu gehen, habe ich das mit der Textarea mal untersucht und konnte bei den automatischen Umbrüchen keine Steuerzeichen finden.
Darauf hin habe ich eine Demo mit dem Verfahren gemacht, das ich beschrieben habe. Ist nicht besonders kompliziert und scheint gut zu funktionieren:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Automatic Wrapping</title>
<style>
#text-container,
#help-container {
display: inline-block;
border: 2px solid lightblue;
min-height: 1em;
}
#text-container {
width: 200px;
}
#help-container {
min-width: 200px;
}
</style>
</head>
<body>
<div id="text-container" contenteditable="true"></div>
<div id="help-container"></div>
<textarea id="help-textarea"></textarea>
<script>
const container = document.getElementById('text-container');
const helpcontainer = document.getElementById('help-container');
const textarea = document.getElementById('help-textarea');
const maxWidth = 200;
container.addEventListener('keyup', (event) => {
let text = container.innerHTML;
console.log(text);
helptext = '';
for (let i = 0; i < text.length; i++) {
helptext += text.charAt(i);
helpcontainer.innerHTML = helptext;
let currentWidth = helpcontainer.clientWidth;
if (currentWidth > maxWidth) {
helptext = helptext.replace(/\s([^\s]+)$/, '<br>$1');
}
}
textarea.value = helptext;
});
</script>
</body>
</html>Du könntest den Zeilenumbruch des Benutzers in der DB speichern und die zusätzlichen erst beim Zeichnen hinzu fügen. Die Funktion kann man sicher so erweitern, dass sie vorhandene Zeilenumbrüche beibehält.
Gibt es evtl. mit jquery oder js eine möglichkeit?
Ich wüsste nicht, wie man aus einer Textarea die automatisch eingefügten Zeilenumbrüche heraus lesen könnte. Aber es wäre eine Möglichkeit, das Verfahren, das ich oben angedeutet habe, zu verwenden: Den Text in einen Hilfscontainer zu schreiben und ständig zu prüfen, ob der Text nicht hinein passt und in dem Fall den Text umzubrechen.
Ups, da haben sich jetzt unsere Postings überschnitten. Als erstes würde ich diese Inflation von div-Containern auf das notwendige reduzieren.
Und dann ist der Grund, warum es nicht funktioniert, offenbar, dass Du das CSS, das Du gepostet hast, auf den Flex-Container und nicht auf das Formular, das offenbar ein Flex-Item oder ein Kind davon ist.
Bevor es Flexlayout gab, war es gar nicht so einfach, mit CSS etwas vertikal zu zentrieren. Aber jetzt kein Problem, informiere dich über Flexlayout, z. B. hier:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
align-items ist dann das was Du brauchst.
Hier wird eine Funktion angeboten, die beim Zeichnen des Textes die Zeilenumbrüche automatisch einfügt:
https://www.php.net/manual/de/function.imagettfbbox.php
(nach "Automatic line breaks" suchen).
Möglicher Weise könntest Du die Texte ohne Zeilenumbrüche in der DB speichern und sie mit Hilfe dieser Funktion erst beim Zeichnen hinzu fügen. Würde auch insofern Sinn machen, weil Du für die Zeilenumbrüche die Fontsize und die verfügbare Breite brauchst, die mehr an die Grafik gebunden sind.
Oder es clientseitig machen, indem Du die Funktion oben nachbildest, indem Du den Text in einen HTML-Container schreibst.
Ich möchte ein Gedicht als Grafik Speichern.
Wo möchtest Du diese Grafik denn speichern, lokal oder auf dem Server?
Hier wird das Problem diskutiert
https://stackoverflow.com/questions/2034…iphone-and-ipad
und geschrieben, dass iOS-Geräte ein Video nur abspielen, wenn die Controls eingeschaltet sind. Macht auch Sinn, denn das Autoplay ist i. allg. geblockt und man muss das Video ja irgend wie starten.
Kann man sich das irgend wo online ansehen?
Einen schönen Ostermontag! Ich habe mal eine Demo mit scale gemacht. War eine Sache von Minuten, jetzt wo ich weiß, wie es sein soll. Man muss:
Nein, da habe ich leider keine Idee. Wenn das Div am Anfang ein display:none hat, funktioniert die Animation nicht, aus den Gründen, die bei Stackoverflow beschrieben werden. Und das display ist nicht animierbar.
So, jetzt ist es spät genug für mich, gute Nacht!
Ja, so ungefähr. Aber das hatten wir ja vorhin schon einmal.
Das Problem ist, dass das Bild von der linken oberen Ecke eingeblendet wird und nicht aus der Mitte heraus.
Bei mir nicht, es wird von links und der Mitte (vertikal) eingeblendet. Was für einen Browser benutzt Du? Unterstützt diese vielleicht kein Flex?
Sieh dir dies an, das müsste sein, was Du dir vorstellst:
Das Menü soll sich ja verschieben. Wenn das Logo nicht eingeblendet ist, dann soll das Menü ganz normal positioniert sein. Wenn das Logo eingeblendet ist, dann soll sich das Menü nach rechts verschieben.
Ich denke, das verstehe ich jetzt. Nur wenn ich es richtig verstehe, sind wir dann genau da wo wir mit animierter Höhe und Breite und vertikaler Zentrierung waren. Moment, ich mache ein Fiddle ...
Ja, lass wissen, ob Du so zum Ziel gekommen bist.
Wenn Du möchtest nehme ich Dir das ganze einmal auf.
Ein Video? Das wäre optimal.