[HTML/CSS]: Image im DIV steht über

[Ralf Kaiser]

Halli Hallo,

ich hoffe dieses Thema ist nicht zu off topic (allerdings handelt es sich um ein ASP.NET Projekt):

In einer Seite habe ich ein DIV in dem ein Image-Control enthalten ist. In dieses Image wird dynamisch eine Grafik geladen. Bei dem Image ist nur die Höhe angegeben damit die Grafik darin korrekt skaliert wird (Höhe bleibt, Breite soll angepasst werden)

Das funktioniert soweit ganz gut. Nur wenn ich eine Grafik hinenlade die viel zu breit ist "steht das Image plötzlich über" (is also breiter als das umgebende DIV. Das seltsame ist, das wenn eine Grafik zu hoch und zu breit ist, diese korrekt skaliert wird.

Ich kann machen was ich will in bestimmten Situationen wird die (fest eingestellte) Grösse des DIVs einfach ignoriert.

Hat jemand so etwas schon mal gesehen? Was kann man tun?

Danke im vorraus,
Ralf

[cruiser]

Zeig mal dein CSS für den Bereich und das HTML-Ergebnis als Auszug

[Ralf Kaiser]

Zitat:

Zitat von cruiser

Zeig mal dein CSS für den Bereich und das HTML-Ergebnis als Auszug

Hi,

kann ich leider erst wieder wenn ich morgen in der Firma bin. Ich habe um das Image herum ein DIV bei dem Höhe und Breite gesetzt sind. Wenn das Image zu gross wird dann steht es (nur in der Breite) aus dem DIV raus.

Ist den das DIV nicht als Container anzusehen und haben die Inhalte nicht in dem Container zu verbleiben?? (Ich werd es morgen mal mit einer Tabelle testen) Irgendwie muss man dem Image doch "sagen" können dass es gefälligst in seinem Continer beliben soll...

Ciao,
Ralf

[Namenloser]

Das müsste dir weiterhelfen: Css: Overflow (selfhtml)

[Ralf Kaiser]

Zitat:

Zitat von NamenLozer

Das müsste dir weiterhelfen: Css: Overflow (selfhtml)

Leider nicht ganz. Meine Situation sieht aus wie das Beispiel zu overflow:visible (sichtbarer Hund) aber genau das will ich nicht haben. Das Image in dem DIV soll sich in der Grösse nach dem DIV richten und den Inhalt anpassen (wie beim Delphi TImage wenn Stretch:=true und Align:=alClient gesetzt ist) Das meinte ich mit "im Container bleiben".

Ich weiss nicht ob so etwas mit HTML/CSS überhaupt möglich ist. Eventuell muss man einen eigenen HTTP Handler schreiben der das Image skaliert und in der richtigen Grösse zurückliefert.

Trotzdem Danke,
Ralf

[Namenloser]

Achso, da habe ich wohl nicht genau genug gelesen.
Habe ich richtig verstanden, dass die höhe des Bildes festgelegt ist? Dann wäre das ja mit width: 100%; relativ einfach zu lösen. oder willst du, dass das Seitenverhältnis gleich bleibt?

[DGL-luke]

Hallo, hilft das vielleicht:

Code:

.image_zwangsjacke {
  width: inherit;
}

Dann wird die Breite vom Elternelement übernommen. Ich weiß aber nicht, ob das nur funktioniert, wenn das Elternelement einen festen Wert zugewiesen hat.

EDIT: Also die variante vom NamenLozen ist da wohl etwas besser...

aber wenn ich mir das genau durchlese... ich glaueb nciht, dass du da mit reinem html/css hinkommst.

[Ralf Kaiser]

Zitat:

Zitat von NamenLozer

oder willst du, dass das Seitenverhältnis gleich bleibt?

Ja. Das Seitenverhältnis soll gleich bleiben. Das ASP-Imagecotrol macht sowas fast so wie ich es haben will (legt man die Höhe fest gilt dieser Wert als Maximalwert, die Breite wird dann angepasst). Sieht gut aus bis eines der Bilder zu breit wird, dann stehts raus (in einem solchen Fall müsste zusätzlich die Höhe verringert werden.

Irgendwie hatte ich heute Nachmittag in dieser Richtung ein echtes Brett vorm Kopf, mal sehen was Morgen ist :)

Wahrscheinlich werde ich die Bilder "by Code" korrekt skalieren müssen (so wie ich das bisher sehe)

Ciao,
RAlf

[Ralf Kaiser]

Zitat:

Zitat von DGL-luke

aber wenn ich mir das genau durchlese... ich glaueb nciht, dass du da mit reinem html/css hinkommst.

Dieses Gefühl beschleich mich auch so langsam... (Das heisst dann wohl: Eigenen HTTP Handler schreiben der die Bilder skaliert und per Response.OutputStream ausgiebt)

Ciao,
Ralf

[Ralf Kaiser]

Zitat:

Zitat von DGL-luke

Hallo, hilft das vielleicht:

Code:

.image_zwangsjacke {
  width: inherit;
}

Zitat:

Zitat von DGL-luke

aber wenn ich mir das genau durchlese... ich glaueb nciht, dass du da mit reinem html/css hinkommst.

Du wirst lachen aber man bekommt das mit html/css hin!! Und zwar genau mit deinem Vorschlag. Das "inherit" zwingt das Image scheinbar wirklich dazu seine Breite zu behalten obwohl sie in dem Control selbst nicht explizit festgelegt war und das Image skaliert die Grafik darin dann auch korrekt!

DANKE!

Ciao,
Ralf