Doris: Bilder sollen sich verkleinern, wenn srceen kleiner

Hallo,
ich wollte mein Problem in jsfiddle darstellen.
Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?
Grüße
Doris

  1. @@Doris:

    nuqneH

    ich wollte mein Problem in jsfiddle darstellen.

    Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, sondern besser bei Dabblet oder Codepen. JSFiddle ist für CSS zu umständlich.

    Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?

    Im Internet sollten genügend Bilder zu finden sein. Es sei denn, es dürfen keine Katzen drauf sein, dann wird’s schwer.

    Aber nur Bilder verwenden, bei denen man die Genehmigung dazu hat. Bspw. von Wikimedia Commons oder placehold.it.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Hi Gunnar,

      Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, ....

      Mein Beispiel hat recht gut funktioniert, nur ein Bild konnte ich nicht einbinden.

      Wie aber kann ich ein Bild einbinden (ich habe noch keine Internet-Seite)?

      Im Internet sollten genügend Bilder zu finden sein. Es sei denn, es dürfen keine Katzen drauf sein, dann wird’s schwer.

      Bilder hätte ich schon, aber die muss ich doch irgendwo ins Internet laden und dann einbinden.
      Mit zwei freien Bildern habe ich es versucht - ohne Erfolg, siehe Beispiel
      Grüße
      Doris

      1. Aloha ;)

        Bilder hätte ich schon, aber die muss ich doch irgendwo ins Internet laden und dann einbinden.
        Mit zwei freien Bildern habe ich es versucht - ohne Erfolg, siehe Beispiel

        Ich habe mir die Freiheit herausgenommen, dein Beispiel upzudaten. Jetzt gehts.

        Tipp für die Zukunft: Bild-URL ≠ URL der Bildseite in Wikimedia Commons

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
        1. Hi Rider,

          Ich habe mir die Freiheit herausgenommen, dein Beispiel upzudaten. Jetzt gehts.

          OK, das Bild ist jetzt da.
          Und jetzt zu meinem eigentlichen Problem.
          Wie erreiche ich, dass das Bild so klein wird, dass es in das div passt, dem die Breite 24% zugeordnet wurde?
          Und wie erreiche ich, dass sich das Bild in der Größe anpasst, wenn die Größe des Bildschirms verändert?
          Wenn ich die Seite verkleinere, wird das Bild abgeschnitten.
          Grüße
          Doris

          1. Hallo

            Wie erreiche ich, dass das Bild so klein wird, dass es in das div passt, dem die Breite 24% zugeordnet wurde?

            Das hast du doch erreicht.

            Dein Problem ist das du die Grundlagen von HTML / CSS überspringen willst. Du benutzt display-Angaben ohne dich über deren Auswirkung zu informieren.

            Wenn du die 24% mal änderen würdest, zum Beispiel auf 50% oder 10% würdest du feststellen, dass das überhaupt keine Auswirkungen hat. Wenn du Angaben wie "display: table;", "display: table-row;", display: table-cell" benutzt, kannst du anschließend nur noch die dafür zulässigen Angaben verwenden. Unzulässige haben wie in deinem Beispiel keine Auswirkungen, sondern werden wie vorgesehen von den Browsern ignoriert.

            Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.

            Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.

            Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".

            Gruss

            MrMurphy

            1. Aloha ;)

              Full ACK und +1, außer...

              Und gib den div zum Testen mal einen kräftigen Rahmen, zum Beispiel "div {border: 3px solid blue;}". Dann kannst du auch sehen, wie groß die div überhaupt sind und das Bilder sich korrekt in ihnen befinden.

              Zum Erstellen von Seiten sollte man überhaupt viel mit kräftigen Rahmen und Hintergrundfarben arbeiten, um die Größe von Containern konkret sehen zu können.

              So war das vor 5-10 Jahren. Der Webentwickler von heute benutzt die browsereigenen Entwicklertools. Die geben den genaustmöglichen Aufschluss über Containergrößen ohne nachteilsbehaftet zu sein. Dicke Rahmen dagegen sind problematisch, weil sie das Layout vollkommen verhauen können, da sie (im Standard-Boxmodell) nicht zur width und height gehören, sondern dazuaddiert werden.

              Zudem solltest du von Anfang an auf die Semantik achten. Für Bilder mit einem zugehörigen einfachen Text sind das figure-Element und das figcaption-Elment gedacht. Die vielen unnützen div wie in deinem Beispiel ergeben keinen Sinn und sollten weggelassen werden, Stichwort: "divitis".

              Der ist auch nett, ich kannte bisher nur divsuppe :D

              Grüße,

              RIDER

              --
              Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
              ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
              1. Moin,

                Stichwort: "divitis".
                Der ist auch nett, ich kannte bisher nur divsuppe :D

                aber auch "Divitis" gehört hier im Forum schon seit Jahren zum aktiven Wortschatz.

                Ciao,
                 Martin

                --
                In der Theorie stimmen Theorie und Praxis genau überein.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            2. Hallo MrMurphy

              Wenn du Angaben wie "display: table;", "display: table-row;", display: table-cell" benutzt, kannst du anschließend nur noch die dafür zulässigen Angaben verwenden.

              Au, wei!
              Ich war der naiven Annahme, die Attribute seien durchgängig, d.h. width bedeutet immer Breite, egal wo ich es anwende.
              Wie finde ich am besten heraus, wo width Gültigkeit hat
              und umgekehrt, welche Attribute zulässig sind bei der Angabe von z.B. "display: table"
              Gruß
              Doris

              1. Aloha ;)

                Au, wei!
                Ich war der naiven Annahme, die Attribute seien durchgängig, d.h. width bedeutet immer Breite, egal wo ich es anwende.

                Naja, width bedeutet ja auch immer Breite... Nur manchmal wird die Breite eben nicht angewandt, weil andere Darstellungsmaximen für dieses Element vorrang haben. Bestes Beispiel: reine inline-Elemente. Diese besitzen allesamt kein Box-Modell.

                Wie finde ich am besten heraus, wo width Gültigkeit hat

                Die Gültigkeit bei Szenarien, in denen du display:... spezifizierst, richtet sich danach, ob die Eigenschaft bei dem Element, auf das display verweist, Gültigkeit besitzen. Also,

                z.B. "display: table"

                zeigt alle Gültigkeiten eines html-Elements table.

                Welche Eigenschaften zum Zuge kommen, findest du experimentell ganz einfach über deine Entwicklerwerkzeuge heraus. Die sagen dir nämlich, welche Art von Box vom Element erzeugt wird und ob überhaupt eine Box erzeugt wird.

                Wenn du's genauer wissen willst: Das W3C führt in seiner Spec (lies: Working Draft) zum basic box model die verschiedenen Typen von Boxen detailliert auf. In diesem Dokument - siehe Inhaltsverzeichnis - sind auch alle CSS-Eigenschaften des box-models aufgezählt. In den einzelnen Kapiteln steht dann je Eigenschaft, auf welche Elemente sie anwendbar sind.

                Für width sind das:

                all elements but non-replaced inline elements, table rows, and row groups

                In deinem Fall: table und td können eine width haben, tr hingegen nicht. Entsprechend für display:table (ja), display:table-row (nein) und display:table-cell (ja).

                Gruß
                Doris

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                ch:? rl:| br:> n4:? ie:% mo:| va:) js:) de:> zu:) fl:( ss:| ls:[
                1. Danke RIDER
                  für die umfangreiche Antwort!
                  Da habe ich jetzt ja was zum Studieren!
                  Viele Grüße
                  Doris

          2. @@Doris:

            nuqneH

            Und wie erreiche ich, dass sich das Bild in der Größe anpasst, wenn die Größe des Bildschirms verändert?

            Offenbar nicht mit Tabellen, da Browser Tabellenzellen so groß aufziehen, dass ihr Inhalt vollständig sichtbar ist.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@Doris:

        nuqneH

        Mir scheint dein Problem bei JSFiddle nicht gut aufgehoben zu sein, ....
        Mein Beispiel hat recht gut funktioniert, nur ein Bild konnte ich nicht einbinden.

        Ich sagte auch nicht, es würde nicht funktionieren, sondern dass *JS*Fiddle für CSS nicht geeignet ist.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. du kannst die Breite der Bilder prozentual zum Elternelement festlegen. Zwei Bilder nebeneinander mit jeweils width=49% werden kleiner und kleiner, wenn du den Viewport schmäler machst.

    Deshalb weniger als 50%, weil meistens noch ein Rand oder ein Leerzeichen dazu kommt.

    Linuchs

    1. @@Linuchs:

      nuqneH

      du kannst die Breite der Bilder prozentual zum Elternelement festlegen. Zwei Bilder nebeneinander mit jeweils width=49% werden kleiner und kleiner, wenn du den Viewport schmäler machst.

      Meine Glaskugel meint, dass hier eher max-width gefragt ist.

      Deshalb weniger als 50%, weil meistens noch ein Rand

      Das meist nicht.

      oder ein Leerzeichen dazu kommt.

      Da bist du mit 2% auch nicht auf der sicheren Seite. Bei störendem Whitespace wäre das Problem am Schopf zu packen, nicht mit magic numbers zu kaschieren.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)