Rainer: <img> Proportional in allen Browsern?

Hallo, wenn ich im IMG-TAG eine prozentuale Grössenangabe mache, passt sich das Bild automatisch proportional an. Aber nur wenn ich entweder width oder height angebe. Schliesslich kann ich nicht die Bildschirmmaße auf beide Angaben anwenden, dann wäre es unproportional.

Das ist schön und auch so gewünscht von mir.

1. Darf ich überhaupt eines der beiden Angaben weglassen aber eines nehmen?

2. Darf die Angabe in Prozent sein?

3. Kann ich mich auf die proportionale Darstellung in allen führenden Browsern verlassen?

4. Gäbe es eine bessere Alternative zu meinem gewünschten Ergebnis?

Noch mal zur Verdeutlichung, ich habe im linken Bereich der Seite ein Bild, dass höchstens so ca. 20% der Screen-Breite ausmachen darf. Aber es soll sich schon in der Länge strecken, also setze ich den Heightwert auf 100%. Es klappt auch soweit, aber ich bin nicht sicher ob das so ok ist.

Rainer

  1. Hallo, wenn ich im IMG-TAG eine prozentuale Grössenangabe mache

    das willst du nicht - browser sind nicht zum skalieren von rastergrafiken gedacht - wenn du skalierbare grafiken haben willst, nimmt vektorgrafiken (wie etwa svg)

    Das ist schön und auch so gewünscht von mir.

    ich kann mir nicht vorstellen, dass eine vom browser skalierte grafik noch schön ist ;)

    1. Darf ich überhaupt eines der beiden Angaben weglassen aber eines nehmen?

    ja

    1. Darf die Angabe in Prozent sein?

    ja - auch in pica, em, cm oder sonstwas
    aber siehe oben - schlechte idee

    1. Kann ich mich auf die proportionale Darstellung in allen führenden Browsern verlassen?

    es wird in vielen browsern furchbar aussehen, aber die proportionen werden stimmen

    1. Gäbe es eine bessere Alternative zu meinem gewünschten Ergebnis?

    wenn du eine rastergrafik mit fixen pixeldimensionen hast, binde sie mit fixen pixeldimensionen ein oder lass beide angaben komplett weg

    Noch mal zur Verdeutlichung, ich habe im linken Bereich der Seite ein Bild, dass höchstens so ca. 20% der Screen-Breite ausmachen darf. Aber es soll sich schon in der Länge strecken, also setze ich den Heightwert auf 100%. Es klappt auch soweit, aber ich bin nicht sicher ob das so ok ist.

    spätestens an dieser stelle stellt man fest, dass du offebar das <img />-element zu layoutzwecken missbrauchst - tu das nicht, es ist NICHT barrierefrei (auch wenn man in den alt-Text "nur fürs layout" schreibt, das ist lästig

    1. Hallo,

      Das ist schön und auch so gewünscht von mir.
      ich kann mir nicht vorstellen, dass eine vom browser skalierte grafik noch schön ist ;)

      »»

      Natürlich kannst du dir das vorstellen, solange die Grafik lediglich aus vertikalen und horizontalen Elementen besteht und diese eine einheitliche Farbe ohne Antialiasing haben.

      es wird in vielen browsern furchbar aussehen, aber die proportionen werden stimmen

      Danke, das freut mich zu hören.

      1. Gäbe es eine bessere Alternative zu meinem gewünschten Ergebnis?
        wenn du eine rastergrafik mit fixen pixeldimensionen hast, binde sie mit fixen pixeldimensionen ein oder lass beide angaben komplett weg

      Das wäre nicht mein gewünschtes Ergebnis.

      spätestens an dieser stelle stellt man fest, dass du offebar das <img />-element zu layoutzwecken missbrauchst - tu das nicht, es ist NICHT barrierefrei (auch wenn man in den alt-Text "nur fürs layout" schreibt, das ist lästig

      Ja da magst du recht haben, aber wie soll ich es sonst lösen? Als BG in einem DIV geht nicht, würde sich ja nicht wie gewünscht anpassen.

      Dank dir
      Rainer

      1. Ja da magst du recht haben, aber wie soll ich es sonst lösen? Als BG in einem DIV geht nicht, würde sich ja nicht wie gewünscht anpassen.

        es gibt nahezu kein problem, welches sich nicht mit ausreichend klebeband - respektive css - lösen lässt

        ein sich wiederholendes hintergrundbild ist die kleinste übung für css

        am besten postest du mal einen link zu deiner seite, dann wirst du sicher geholfen ;)

        1. ein sich wiederholendes hintergrundbild ist die kleinste übung für css

          Es soll sich nicht wiederholen, sondern in der Höhe dem Bildschirm anpassen.

          1. Es soll sich nicht wiederholen, sondern in der Höhe dem Bildschirm anpassen.

            das ist mit css 2.1 nicht möglich - kommt erst

            allerdings stellt sich mir die frage, ob du dir der konsequenzen bewusst bist - willst du wirklich wissen, wie uncool das ganze aussieht, wenn jemand einen sehr hohen bzw einen sehr niedrigen viewport hat?

            1. Es soll sich nicht wiederholen, sondern in der Höhe dem Bildschirm anpassen.

              das ist mit css 2.1 nicht möglich - kommt erst

              Also keine andere Option als <img>

              allerdings stellt sich mir die frage, ob du dir der konsequenzen bewusst bist - willst du wirklich wissen, wie uncool das ganze aussieht, wenn jemand einen sehr hohen bzw einen sehr niedrigen viewport hat?

              Ich habe es doch schon getestet, viele Auflösungen+ verschiedene Bildschrimgrössen. Es sieht gut aus, wie eine Vektorgrafik, keine Treppenstufen oder sonstwas.

              Rainer

              1. Ich habe es doch schon getestet, viele Auflösungen+ verschiedene Bildschrimgrössen. Es sieht gut aus, wie eine Vektorgrafik, keine Treppenstufen oder sonstwas.

                ich kanns mir nicht vorstellen, aber wenn du meinst ;)