Susanne: Pixel dehnen und zerren

Hallo,

ich habe folgendes Problem:

Ich möchte einen schönen Rahmen in Regenbogenfarben machen und hab mir dafür auch schon eine schöne Grafik (pro Farbe 1 Pixel breit und 10 Pixel hoch) gemacht.

Jetzt möchte ich, daß dieser Rahmen um meinen Text läuft - klappt auch super, wenn ich es ganz normal einbinde. Sobald ich aber eine width oder height angebe (z.B. 100% oder 100) wird das Bild in JEDE Richtung faktorisiert.
<img src=rainbow_o.gif width=100% height=10> (also den Regenbogen einfach nur in die Länge, nicht in die Breite ziehen)

Es entsteht keine bunte Linie, sondern ein bunter !!!Streifen!!!.

Wie kann ich das umgehen, daß ich eine Linie von 100% gekomme ohne daß mir die Linie breiter wird?

MFG Susanne

  1. Hallo Susanne,

    könntest du mir bitte deine Definitionen von "Länge", "Breite", "width", "Linie" und "Streifen" schreiben?

    Ich werd aus deiner Problembeschreibung absolut nicht schlau.
    Oder dir ist nicht klar, was "Breite" und "width" bedeuten.
    Zu "Länge" finde ich im 2-dimensionalen Raum auch wenig Bezug.

    Grüße, Matze

    1. Hallo,

      könntest du mir bitte deine Definitionen von "Länge", "Breite", "width", "Linie" und "Streifen" schreiben?

      ;-)

      Ich werd aus deiner Problembeschreibung absolut nicht schlau.

      Das geht mir auch so.

      Zu "Länge" finde ich im 2-dimensionalen Raum auch wenig Bezug.

      <smartass mode="kidding">
      Wird die Ausdehnung eines zweidimensionalen Gebildes angegeben, legt man gern ein kartesisches Koordinatensystem zugrunde und notiert die Ausmaße des Objekts in Bezug auf die beiden Achsen.
      Landläufig wird die größere der beiden Ausdehnungen "Länge" genannt, die kleinere "Breite". Auf Projektionsflächen, die in unserer dreidimensionalen Welt oft näherungsweise hochkant stehen (z.B. Bildschirme), spricht man auch von einer Höhe (anstatt Länge) und einer Breite.
      Auch die größte Ausdehnung eines dreidimensionalen Gebildes wird üblicherweise als Länge bezeichnet.
      </smartass>

      @Susanne:

      »» Sobald ich aber eine width oder height angebe (z.B. 100% oder 100) wird das Bild in JEDE Richtung faktorisiert.

      Was meinst du mit "faktorisiert"? Meinst du "skaliert"? - Wenn du nur eine der beiden Abmessungen angibst (also entweder width oder height), dann wird die andere proportional mitskaliert. Das ist so festgelegt.

      »» <img src=rainbow_o.gif width=100% height=10> (also den Regenbogen einfach nur in die Länge, nicht in die Breite ziehen)

      Aber du ziehst ihn doch in die Breite! Du gibst doch an, er soll sich über 100% der Breite des umgebenden Elements erstrecken. Im übrigen solltest du dir angewöhnen, Attributwerte grundsätzlich in Anführungszeichen zu schreiben.

      »» Es entsteht keine bunte Linie, sondern ein bunter !!!Streifen!!!.

      Natürlich. Genau das beschreibt dein Codebeispiel.

      So long,
       Martin

      --
      Wissen erwirbt man, indem man immer das Kleingedruckte sorgfältig liest.
      Erfahrung bekommt man, indem man das nicht tut.
      1. Hallo Martin, danke für deine genauere Erläuterung von Länge - ich hab echt nicht gewußt, daß Programmierer so von der Außenwelt abgeschnitten sind, daß sie nicht mal mehr wissen, was "Länge" eines Bildes ist. Nicht böse gemeint, aber diese Frage hab ich von meiner 4-jährigen Tochter erwartet, aber nicht von einem Programmierer.

        Also ich möchte einen Rahmen machen - ich glaub wir bleiben mal lieber bei einer Linie, dann ist es leichter:

        -----
        |RGBLP|
         -----

        R=Rot, G=Gelb, usw, also es ist eine Linie von 10 pixel HÖHE (HEIGHT) und jede vertikale Pixelbahn ist in einer anderen Farbe.

        Wenn ich die Grafik jetzt einbinde, dann soll diese die BREITE (WIDTH) des ganzen Bildschirmes haben, aber nur die Höhe von ursprünglich 10 Pixel:

        ---------------
        |RRRGGGBBBLLLPPP|
         ---------------

        Der Browser macht nix aber das draus:

        ---------------
        |RRRGGGBBBLLLPPP|
        |RRRGGGBBBLLLPPP|
        |RRRGGGBBBLLLPPP|
         ---------------

        Also er faktorisiert (das ist übrigends ein Begriff aus der Mathematik und bedeutet soviel, daß beide Angaben und den selben FAKTOR malgenommen werden) oder wie es scheinbar heißt skaliert mir das in meinem Beispiel aufs Dreifache.

        Was meinst du mit "faktorisiert"? Meinst du "skaliert"? - Wenn du nur eine der beiden Abmessungen angibst (also entweder width oder height), dann wird die andere proportional mitskaliert. Das ist so festgelegt.

        Ich denke mal es ist unmöglich, wenn ich das mit dem "festgelegt" aufgreife - hätte ja sein können, daß es da eine Einstellung mit CSS oder so gibt, wenn man schon in der Lage ist Bilder übereinander zu lagern.

        1. Hallo Susanne,

          danke für deine genauere Erläuterung von Länge

          naja, mir kam deine Beschreibung anfangs auch etwas konfus vor, weil wir bei der Bildschirmdarstellung eher mal von Breite und Höhe reden. Aber sei's drum.

          Also ich möchte einen Rahmen machen - ich glaub wir bleiben mal lieber bei einer Linie, dann ist es leichter:


          RGBLP

          R=Rot, G=Gelb, usw, also es ist eine Linie von 10 pixel HÖHE (HEIGHT) und jede vertikale Pixelbahn ist in einer anderen Farbe.

          Also ungefähr sowas (10fach vergrößert):

          Wenn ich die Grafik jetzt einbinde, dann soll diese die BREITE (WIDTH) des ganzen Bildschirmes haben, aber nur die Höhe von ursprünglich 10 Pixel:


          RRRGGGBBBLLLPPP

          Also ungefähr sowas (10fach vergrößert):

          Der Browser macht nix aber das draus:


          |RRRGGGBBBLLLPPP|
          |RRRGGGBBBLLLPPP|

          RRRGGGBBBLLLPPP

          Es scheint damit zusammenzuhängen, dass du die Breite in Prozent, die Höhe aber in Pixeln angibst. Hast du mal versucht (nur probehalber), auch die Breite in Pixel vorzugeben? Man *kann* nämlich ein Bild auf die Weise verzerren, d.h. die Proportionen verändern.
          Als Alternative würde ich dir noch vorschlagen, die Maße des Bildes mit CSS anzugeben, notfalls sogar mit einem inline-Attribut:
            style="width: 100%; height: 10px;"

          Also er faktorisiert (das ist übrigends ein Begriff aus der Mathematik und bedeutet soviel, daß beide Angaben und den selben FAKTOR malgenommen werden)

          Ich kenne es eher für "in Faktoren zerlegen".

          Ich denke mal es ist unmöglich, wenn ich das mit dem "festgelegt" aufgreife

          Nein, mit "festgelegt" meinte ich nur meinen Sonderfall, dass du nur *entweder* die Höhe *oder* die Breite angibst, und den anderen Wert weglässt. Dann wird proportional skaliert.

          So long,
           Martin

          --
          Wer schläft, sündigt nicht.
          Wer vorher sündigt, schläft besser.
        2. ich hab echt nicht gewußt, daß Programmierer so von der Außenwelt abgeschnitten sind, daß sie nicht mal mehr wissen, was "Länge" eines Bildes ist. Nicht böse gemeint, aber diese Frage hab ich von meiner 4-jährigen Tochter erwartet, aber nicht von einem Programmierer.

          Keine Angst, ich bin nirgends abgeschnitten.
          Aber du schreibst ja auch 'height=...' und 'width=...' daher sollte man auch von Höhe und Breite sprechen und nicht "Länge" einmischen die, wie wir gelernt haben, ein Begriff für die Ausdehnung in beide Richtungen gelten kann (was halt 'länger' ist).
          Was deine 4-jährige Tochter angeht... Wenn sie so interessiert fragt wird sud ihr vielleicht mal Programmiererin ;)


          RGBLP
          R=Rot, G=Gelb, usw(..)

          Das nächste. In der Regel hat man sich angewöhnt mit RGB "Rot-Grün-Blau" oder "Red-Green-Blue" zu beschreiben. Um Missverständnisse zu vermeiden, verwendet man für Gelb in der Regel "Y" als Abkürzung für das englische "Yellow".

          Wenn du Fragen zu einem Fachgebiet hast, solltest du halt ein bisschen darauf achten keine Fachbegriffe zu vermischen, falsch zu verwenden oder Ähnlichkeiten zu vermeiden. Du umschreibst irgendwie sehr blumig aber nicht treffend.
          RGBLP soll vermutlich "Rot-Gelb-Blau-Lila-Pink" heißen, könnte aber auch für eine "Rot-Grün-Blaue-Langspiel-Platte" stehen ;)

          Btt

          Ich denk auch, es wird am Zusammenspiel von Pixel und Prozent liegen, bin mir aber immernoch nicht sicher was du eigentlich genau willst.

          "Das ist so festgelegt." heißt nicht, dass du nicht zu deinem gewünschten Ergebniss kommst, sondern dass dein Code nicht zum Ziel führt sondern zum vorliegenden Problem. Der Code an sich tut genau das was er soll.

          You want to do X, and you think Y is the best way of doing so. Instead of asking about X, you ask about Y.

          Was sagt den eigentlich der Validator?

          Grüße, Matze