nicht angemeldet
IMG skalieren aber nicht verzerren
0 0 1 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 0 0 0 Gunnar Bittersmann
0 0 0 
Matthias Apsel
IMG skalieren aber nicht verzerren
Hallöchen,
ich möchte eine Webseite machen, die nichts anderes tut, als ein (zufällig per JS ausgewähltes) Bild anzuzeigen.
Das Bild soll dabei horizontal und vertikal in der Mitte des Browserfensters zentriert sein. Das bekomme ich noch hin.
Nun möchte ich aber, dass das Bild auch mit dem Browserfenster mitskaliert! D.h. wenn jemand das Fenster kleiner macht, soll auch das Bild kleiner werden. Es soll dabei aber nicht verzerrt werden!
Wie mache ich das? Ist das mit HTML und CSS möglich, oder brauche ich da was anderes? Kennt jemand ein Tutorial oder Beispiel für sowas?
Viele Grüße, Atreiju.
-
Hallo,
du setzt das Attribut width oder height auf einen bestimmten Prozentwert, den anderen nicht. Dann skaliert es mit.
Grüße
Siri-
Danke, aber so einfach scheint es nicht zu klappen. Denn wenn ich das mache, dann kann es passieren, dass ein Teil des Bildes abgeschnitten wird, je nachdem, ob das Bild hochkant oder quer ist und ob das Browser-Fenster Hoch- oder Querformat hat.
Grüße, Atreiju.
Hallo,
du setzt das Attribut width oder height auf einen bestimmten Prozentwert, den anderen nicht. Dann skaliert es mit.
Grüße
Siri-
Om nah hoo pez nyeetz, Atreiju!
Danke, aber so einfach scheint es nicht zu klappen. Denn wenn ich das mache, dann kann es passieren, dass ein Teil des Bildes abgeschnitten wird, je nachdem, ob das Bild hochkant oder quer ist und ob das Browser-Fenster Hoch- oder Querformat hat.
du setzt das Attribut width oder height auf einen bestimmten Prozentwert, den anderen nicht. Dann skaliert es mit.
und setzt zusätzlich maximale Abmessungen in Prozent.
Matthias
--
1/z ist kein Blatt Papier.
-
-
@@Siri:
nuqneH
Antwort von Radio Jerewan:
du setzt das Attribut width oder height auf einen bestimmten Prozentwert, den anderen nicht. Dann skaliert es mit.
Im Prinzip ja, nur dass man das nicht mit HTML-Attributen tut, sondern mit CSS-Eigenschaften, und nicht width/height, sondern max-width/max-height, und nicht den einen und den anderen nicht, sondern beide.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)-
Hallo,
Im Prinzip ja, nur dass man das nicht mit HTML-Attributen tut, sondern mit CSS-Eigenschaften,
Ja, bei Prozent in HTML5, aber auch dort ist das Attribut erlaubt, aber so weit ich weiß sind dann nur Picelwerte möglich.
und nicht width/height, sondern max-width/max-height,
Wenn ich das Bild nicht über einen bestimmte Größe hinaus haben möchte, wenn es mir aber egal ist?
und nicht den einen und den anderen nicht, sondern beide.
Welche Vorschrift besagt das?
Grüße
Siri-
@@Siri:
nuqneH
und nicht width/height, sondern max-width/max-height,
Wenn ich das Bild nicht über einen bestimmte Größe hinaus haben möchte, wenn es mir aber egal ist?Dir mag es egal sein, dem OP aber nicht.
und nicht den einen und den anderen nicht, sondern beide.
Welche Vorschrift besagt das?Keine Vorschrift, sondern der Wunsch des OP.
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)-
Hallo
Keine Vorschrift, sondern der Wunsch des OP.
"Nun möchte ich aber, dass das Bild auch mit dem Browserfenster mitskaliert! D.h. wenn jemand das Fenster kleiner macht, soll auch das Bild kleiner werden. Es soll dabei aber nicht verzerrt werden!"
.bildstyle{ width: 30%; }<body> <img class="bildstyle" src="exampleimg.jpg" /> </body> ~~~tut genau das. Das Bild skaliert mit, wird dabei aber nicht verzerrt. Grüße Siri-
Hi,
Keine Vorschrift, sondern der Wunsch des OP.
"Nun möchte ich aber, dass das Bild auch mit dem Browserfenster mitskaliert! D.h. wenn jemand das Fenster kleiner macht, soll auch das Bild kleiner werden. Es soll dabei aber nicht verzerrt werden!"
.bildstyle{
width: 30%;
}> ~~~html <body> > <img class="bildstyle" src="exampleimg.jpg" /> > </body>tut genau das. Das Bild skaliert mit, wird dabei aber nicht verzerrt.
Nein, das „tut das“ nur in die eine Dimension, aber nicht in beide.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hallo
.bildstyle{
width: 30%;
}> > ~~~html <body> > > <img class="bildstyle" src="exampleimg.jpg" /> > > </body>tut genau das. Das Bild skaliert mit, wird dabei aber nicht verzerrt.
Nein, das „tut das“ nur in die eine Dimension, aber nicht in beide.
Probiers aus. Das Bild behält sein Länge-zu-Seite-Verhältnis bei, wenn man die Größe des Browserfensters ändert.
Grüße
Siri-
@@Siri:
nuqneH
.bildstyle{
width: 30%;
}> > > ~~~html <body> > > > <img class="bildstyle" src="exampleimg.jpg" /> > > > </body>tut genau das. Das Bild skaliert mit, wird dabei aber nicht verzerrt.
Nein, das „tut das“ nur in die eine Dimension, aber nicht in beide.
Probiers aus. Das Bild behält sein Länge-zu-Seite-Verhältnis bei, wenn man die Größe des Browserfensters ändert.
Probier’s aus. Das Bild passt sich Änderungen der Größe des Browserfensters „nur in die eine Dimension, aber nicht in beide“ an.
Gemeint sind nicht die Dimensionen des Bildes, sondern die Dimensionen der Änderungen der Größe des Browserfensters
Qapla'
--
Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)-
Hallo,
Gemeint sind nicht die Dimensionen des Bildes, sondern die Dimensionen der Änderungen der Größe des Browserfensters
Da möchte ich ja mal wissen, wie Du das herausgelsen hast... Wahrscheinlich jahrelange Übung...
bildstyle{
width: 30%;
}
bildstyle2{
width: 30%;
height: 30%;
}
<body>
<img class="bildstyle" src="exampleimg.jpg" id="bild1"/>
<img class="bildstyle2" src="exampleimg.jpg" id="bild2"/>
</body>Beide Bilder haben exakt die gleiche Höhe und Breite, egal wie ich das Browserfenster vergrößere oder verkleinere. Bild @bild1 verringert genauso die Breite wie Bild @bild2. Das habe ich gemeint.
Grüße
Siri-
Hi,
Gemeint sind nicht die Dimensionen des Bildes, sondern die Dimensionen der Änderungen der Größe des Browserfensters
Da möchte ich ja mal wissen, wie Du das herausgelsen hast... Wahrscheinlich jahrelange Übung...
Ja, vermutlich schon.
Beide Bilder haben exakt die gleiche Höhe und Breite, egal wie ich das Browserfenster vergrößere oder verkleinere. Bild @bild1 verringert genauso die Breite wie Bild @bild2. Das habe ich gemeint.
Das funktioniert vielleicht bei deinem Testfall – aus Zufall, weil sowohl „Bildschirm“ also auch Bilder breiter als hoch sind.
Bei Bildern, die höher als breit sind, erreicht die Angabe von width:100% allein aber nicht (in allen Fällen) das gewünschte – das Bild immer *maximal* groß anzuzeigen, ohne etwas abzuschneiden und ohne es zu verzerren.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? -
Om nah hoo pez nyeetz, Siri!
Gemeint ist aber, dass ein Bild, für das nur eine Breite festgelegt wird, auch nur auf Änderungen der Breite des Browserfensters reagiert, nicht auf die Höhe, obwohl da ggf. "noch Platz wäre", etwa bei Bildern im Portraitformat.
Matthias
--
1/z ist kein Blatt Papier.
-
-
-
-
-
-
-
-
-