Picture in HTML anpassen, drehen und zoomen

  • Hallo zusammen,


    Ich bin neu hier im Forum. Bisher habe ich mit Visual Basic .Net programmiert.

    Vor sehr langer Zeit hatte ich auch mal Webseiten programmiert. Vor kurzem, auf Grund von Augmented Reality bin ich wieder mit Java, CSS und Co. in Berührung gekommen.


    Nun bin ich gerade dabei, eine Website mit 1-4 Bilder, Checkboxen und Dropdown Felder zu erstellen. Die ist auch soweit fertig.

    Nun werden die 1-4 Bilder, je nach Auswahl auf der Website angezeigt. Bei Klick auf das jeweilige Bild öffnet sich ein Dialog (Modal).

    Dieses habe ich unterteilt in zwei Bereich. Links wird das Bild angezeigt, recht Informationen dazu.


    Nun (es ist ja möglich das die Bilder unterschiedliche Größen haben) das das Bild in einem Rahmen (nehme ich div dazu?) propotional angezeigt wird.

    Unter dem Bild befinden sich vier Button.
    1. Button: 90° nach links

    2. Button: 90° nach rechts

    3. Button: Verkleinern

    4. Button: Vergrößern


    Nun habe ich gedacht, dass ich die Gradzahl als Variable definiere und bei jedem Klick, die Zahl sich um 90 erhöht, dadurch das Bild sich dreht. Aber so richtig funktioniert das nicht.

    Google und Co. habe ich als Suche bereits genutzt, aber in Bezug auf Modal und drehen bzw. zoomen habe ich noch nichts gefunden.


    Es wäre schön wenn ihr mir als Newcomer ein paar Tipps in die jeweilige Richtung geben könntet.


    Nachtrag: das mit dem Bilder am Rahmen anpassen habe ich glaube ich gefunden: https://www.html-seminar.de/bilder-bei-responsive-design.htm


    Viele Grüße

    Marja

  • Hallo marja und willkommen im Forum!

    Zunächst nur eine Kleinigkeit:

    Zitat

    das Bild in einem Rahmen (nehme ich div dazu?)

    Es wird mit einem div funktionieren, aber als Container für Bilder und die Informationen dazu gibt es in HTML5 das figure-Tag.


    Für Drehen, Verkleinern und Vergrößern informiere dich über CSS-transform, z. B. hier:
    https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/äußere_Gestaltung/Transformationen

  • Danke schön


    Mit dem figure-Tag habe ich nun etwas experimentiert. Aber wenn das Bild oder sonstiges größer ist als ich den figure-Tag definiert habe, geht es über den den figure-Tag?


    Code
    1. figure {
    2. position: relative;
    3. margin: 0;
    4. padding: 10px;
    5. width: 200px;
    6. height: 200px;
    7. border: 1px solid gainsboro;
    8. background: white;
    9. }

    So etwas wie Scrollbalken gib es nicht im Container figure-Tag oder? Aber da Du mir den Tip gegeben hast - figure-Tag - werde ich mal weiter stöbern, so dass ich bsp. ein Container habe der 200px mal 200px ist und wenn das Bild größer ist, mir dann Scrollbalken angezeigt werden.


    Update: overflow {} scheint das zu sein, was ich gesucht habe ;-)

    Vielen Dank

    Marja

  • figure {} kann ich das in der css Datei auch mehrfach definieren wie bei label {} ?


    Hintergrund; label {} habe ich in der css Datei mehrfach definiert - Beispiel label span_text1 {} , label span_text2 {} etc. Das spreche ich in der html dann auch so an <span_text1></span_text1> und <span_text2></span_text2> was funktioniert. Bei figure pic1 {} in der css Datei funktioniert das nicht. Dadurch haben alle figure Container die gleichen Einstellungen wobei ich aber gerne die einen Bilder in einen 100x100px Container angezeigt haben möchte und die anderen Bilder im Dialog in dem Container 200x200px angezeigt haben möchte.


    Grüße

    Marja

  • Kein Problem, Du brauchst den Elementen nur eine Klasse zu geben, dann kannst Du sie individuell gestalten:

    Code
    1. <figure class="figure1">
    2. <img src="img1.jpg">
    3. </figure>
    4. <figure class="figure2">
    5. <img src="img2.jpg">
    6. </figure>
    Code
    1. .figure1 {
    2. width: 200px;
    3. height: 200px;
    4. }
    5. .figure2 {
    6. width: 100px;
    7. height: 100px;
    8. }

    Die selbe Klasse kannst Du natürlich mehreren Elementen geben.

  • und wieder mal vielen Dank für Deine Hilfe.


    Es hat mir nach meinem Post keine ruhe gelassen, Laptop war aus und ich habe per Smartphone gegoogelt und genau das gefunden was du mir gesagt hast mit der class. Also Laptop wieder eingeschaltet und TOP. Es funktioniert wunderbar!! Danke schön


    Das mit der Class ist ja super einfach ;-)