Bildgröße verändern

PHP, CSS und JavaScript lernen. Anwendungen für Webseiten
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Bildgröße verändern

Ungelesener Beitrag von Tommy Herrmann »

Hallo Werner,

ich habe heute Deine Idee der veränderbaren Bildgröße mittels Formularfeld "textarea" gefunden:

https://werner-zenk.de/css/textbereich_ ... wenden.php

... und das mal in eine meiner Mobirise-Seiten übernommen:

https://www.mobirise-tutorials.com/Busi ... tarea-Bild


Bildanzeige ändern.JPG


Das ist ein tolle Idee, vielen Dank dafür :tu:

Da "Bootstrap" das ohne <form> Tag </form> einfach so nicht zulässt, musste ich noch ein <div> Tag </div> herum legen, mit dem ich das Bild über die Bootstrap class="d-flex justify-content-center" sogleich auch in jeder Größe zentriere. Weiterhin musste ich den Selektor "textarea" etwas ändern, da Bootstrap hier nur die vertikale Anpassung zulässt.
Benutzeravatar
Rancher
Moderator
Moderator
Beiträge: 466
Registriert: Di 8. Dez 2020, 18:37
Wohnort: Elsass

Re: Bildgröße verändern

Ungelesener Beitrag von Rancher »

:tu: an Werner und Tommy!
Wenn Dein Pferd tot ist, steig ab.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Werner-Zenk.de »

Hallo Tommy,
ich bin da eher zufällig darauf gekommen weil ich eine Lösung zu einem anderen Problem suchte (https://werner-zenk.de/javascript/bilde ... nktion.php).
Das ganze geht auch ohne Textarea, mit einem Block-Element (zum Beispiel: div). Habe ein weiteres Beispiel auf der Seite hinzugefügt.
Am Handy passiert da nicht viel, Firefox reagiert überhaupt nicht auf die Änderung der Größe und beim Edge ist es ein Geduldsspiel.
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Tommy Herrmann »

Ja - habe ich schon entdeckt und auch selbst schon probiert :bier:

Wollte aber bei Deinem Beispiel bleiben, was ja auch funktioniert.

... wenn man "Bootstrap" verwendet, weiß man immer nicht, welche Klassen bereits definiert wurden.

Am Handy ist das Attribut "resize" wirkungslos (vermute ich mal) ...

Bei jedem Kontaktformular ist das Nachrichten-Feld ("textarea") ja auch am Handy nicht in der Größe zu ändern.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Werner-Zenk.de »

Zumindest beim Edge funktioniert das am Handy. Zugegeben man muss da 20 mal Tippen bis man mit dem dicken Zeigefinger die Ecke erwischt :D


edge_textbereich.png
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ja, dann sollte aber besser eine maximale Größe von 100% mit eingetragen sein.

Am Handy macht das natürlich keinen Sinn, da man am Handy-Display ja ohnehin jedes Bild mit 2 Fingern, schon ganz automatisch, größer zieht.
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Werner-Zenk.de »

Naja, 100% ist immer so eine Sache für sich. Am Desktop PC und Handy mag das noch gehen, aber hast du schon mal mit einem 75 Zoll Monitor gesurft, da ist die Textarea ca. 140 cm breit :D
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Tommy Herrmann »

Moin,

nee - so groß ist ja mein Fernseher noch nicht mal :eek: :D

... aber mit den 100% meine ich auf den <div> Container mit dem Bild bezogen und nicht auf das Bild selbst. Bei Deinem Beispiel fehlt ja eine "max-width" Angabe und ohne eine maximale Breite bekommt man das Bild nämlich am PC und Handy nicht wieder klein gezogen ohne die Seite neu zu laden, weil der Touchpoint außerhalb des sichtbaren Bereichs verschoben werden kann.

Mein Container ist am Handy bereits viel schmaler als die Displaybreite - vielleicht so 90%.

Größer als so geht auf meiner Handy-Seite nicht:


Screenshot Firefox Handy.jpg
Benutzeravatar
Werner-Zenk.de
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 755
Registriert: Di 8. Dez 2020, 19:42
Wohnort: Bamberg
Kontaktdaten:

Re: Bildgröße verändern

Ungelesener Beitrag von Werner-Zenk.de »

Tommy du bist der Designer der sich mit so etwas auskennt :tu: , Mein Part ist eher das programmieren und ich versuche das z.B.: Formulare möglichst logisch durch dem (JS/PHP) Prozess geleitet werden ohne das der Benutzer nochmals eingreifen muss um seine Daten zu korrigieren.
Ich erinnere mich noch an viele Textarea(s) in der Vergangenheit die viel zu klein waren um da vernünftig einen Text eingeben zu können und die Größe lies sich nicht mal auf einem Desktop-Monitor anpassen. Und gerade bei Formularen ist es so wichtig das der Benutzer seine Daten vernünftig eingeben kann ohne das dass Design die Formularfelder zu klein anzeigt.
Ziel von uns beiden ist es doch, das der Benutzer das Formular nicht vorzeitig abbricht aus welchen Gründen auch immer.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 14 Gäste