nicht angemeldet
Bild skalieren css
0 0 
Der Martin
0 
Gunnar Bittersmann
Bild skalieren css
Was tue ich denn da falsch???
Das Bild soll im Normalzustand auf 200 skaliert dargestellt werden, :hover dann überblendet in voller Größe. Läßt sich das nicht so oder so ähnlich tun??
<div style="width:700;position:relative;">
<div class=kbild><img src="http://....jpg"></div>
</div>
.kbild {
position: absolute;
top: 500px;
max-width: 200px;
float:left;
}
.kbild:hover {
width:472; /*Bildgröße fullsize*/
position: absolute;
top: 450px;
z-index:100;
/*-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4); */
}
-
Hi there,
.kbild:hover {
width:472; /*Bildgröße fullsize*/da fehlt die Einheit...
-
das stimmt, aber Problem besteht in erster Linie schonmal darin, daß das Bild ohne hover nicht die Breite des <div> von 200px annimmt...wie skaliert das Bild denn mit dem <div>
-
Hi there,
das stimmt, aber Problem besteht in erster Linie schonmal darin, daß das Bild ohne hover nicht die Breite des <div> von 200px annimmt...wie skaliert das Bild denn mit dem <div>
naja, wenn Du dem Div eine Breite von 200px gibst, ist das dem Bild ziemlich wurscht. Warum wendest Du die Klasse kbild nicht einfach auf das Bild selbst an? Ein Div, das nur ein einziges Bild enthält, ist komplett überflüssig...
-
Hi there,
Ein Div, das nur ein einziges Bild enthält, ist komplett überflüssig...
Das kommt darauf an.
Wenn das Element noch Pseudo-Elemente (::before, ::after) haben soll, dann nicht.Gruß Gunther
-
Hi there,
Ein Div, das nur ein einziges Bild enthält, ist komplett überflüssig...
Das kommt darauf an.
Wenn das Element noch Pseudo-Elemente (::before, ::after) haben soll, dann nicht.Welches Pseudo-Element kannst Du auf ein Div anwenden, das Du auf ein Bild nicht anwenden kannst?
-
Meine Herren!
Welches Pseudo-Element kannst Du auf ein Div anwenden, das Du auf ein Bild nicht anwenden kannst?
Die zwei populärsten Vertreter ::before und ::after. Online-Beispiel.
Das Verhalten von Pseudo-Elementen für "replaced Elements", also Bilder, Videos und eingebetteten Inhalt ist von CSS nicht genauer spezifiziert worden. http://www.w3.org/TR/2011/REC-CSS2-20110607/generate.html
--
“All right, then, I'll go to hell.” -
Hi there,
Ein Div, das nur ein einziges Bild enthält, ist komplett überflüssig...
Das kommt darauf an.
Wenn das Element noch Pseudo-Elemente (::before, ::after) haben soll, dann nicht.Welches Pseudo-Element kannst Du auf ein Div anwenden, das Du auf ein Bild nicht anwenden kannst?
Wer Lesen kann, ist klar im Vorteil ...! *SCNR*
Hier noch ein interessanter Artikel zum Thema, in dem sich auch einige "bekannte" Developer dazu äußern.
Gruß Gunther
-
-
-
-
-
-
Hi,
Was tue ich denn da falsch???
von den vielen Stellen abgesehen, wo eine Einheit fehlt:
Du skalierst nicht das Bild, sondern das Containerelement, das das Bild umgibt.Das Bild soll im Normalzustand auf 200 skaliert dargestellt werden
Öhm ... 200 Meter? 200 Prozent? 200 Mücken?
<div style="width:700;position:relative;">
<div class=kbild><img src="http://....jpg"></div>
</div>Wozu packst du das Bild in zwei div-Container ein? Ciao, Martin -- Alleine sind wir stark ... gemeinsam sind wir unausstehlich! Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:( -
@@gernberaten:
nuqneH
Selbst wenn du die bisher gegebenen Ratschläge befolgst:
.kbild {
position: absolute;
top: 500px;
max-width: 200px;
float:left;
}Hiermit gibst du dem Element eine Maximalbreite. (float in Verbindung mit position: absolute ist übrigens unsinnig.) > ~~~css > .kbild:hover { > width:472; /*Bildgröße fullsize*/ > position: absolute; > top: 450px; > z-index:100; > } >Hiermit gibst du dem Element im Hover-Zustand eine Breite (wenn der Wert denn gültig wäre), die kleiner ist als die Maximalbreite, welche natürlich immer noch gilt. Das Element wird folglich seine Größe nicht ändern.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)