Div an Bildgröße anpassen

[fuzzycontrol]

Hallo,

ich habe ein div, in das div soll ein bild.

Dabei soll sich die Breite des div an die Breite des Bildes anpassen.

Geht das irgendwie?

[wahsaga]

hi,

ich habe ein div, in das div soll ein bild.

Dabei soll sich die Breite des div an die Breite des Bildes anpassen.

Geht das irgendwie?

display:inline?
position:absolute?
ggf. float?

gruß,
wahsaga

[Inita_]

Hallo,

ich habe ein div, in das div soll ein bild.

Dabei soll sich die Breite des div an die Breite des Bildes anpassen.

Ja.

<div>
    <img src="hund.jpg" width="18" height="18" alt="" />
</div>

[fuzzycontrol]

<div>
    <img src="hund.jpg" width="18" height="18" alt="" />
</div>

In dieser Struktur möchte ich es machen. Nur so klappt es nicht.
Denn:

• die Breite des Bildes kenn ich nicht (kommen immer andere Bilder rein)
• das div so automatisch 100% Breite nimmt, will ich aber nicht, weil das div zusätzlich noch im Fenster zentriert werden soll

mit <div style="display: table-cell"> kann ich zwar die dynamische Breite erreichen, dann hängt das div in der Ecke des Fensters, ignoriert also das style="margin: 100px auto auto auto;"

[Inita_]

hi.

In dieser Struktur möchte ich es machen. Nur so klappt es nicht.
Denn:

• die Breite des Bildes kenn ich nicht (kommen immer andere Bilder rein)
• das div so automatisch 100% Breite nimmt, will ich aber nicht, weil das div zusätzlich noch im Fenster zentriert werden soll

mit <div style="display: table-cell"> kann ich zwar die dynamische Breite erreichen, dann hängt das div in der Ecke des Fensters, ignoriert also das style="margin: 100px auto auto auto;"

so geht nicht? :/, width des bildes eifach rausnehmen.

<div style="margin:100px auto 0 auto">
   <img src="hund.jpg" height="70" alt="" />
</div>

Inita

[fuzzycontrol]

<div style="margin:100px auto 0 auto">
   <img src="hund.jpg" height="70" alt="" />
</div>

Inita

So gehts halt nicht. Setze ich um das div einen Rahmen, dann geht das Bild einfach über den Rahmen hinaus und die div-Größe bleibt unverändert.

[Inita_]

rehi

<div style="text-align:center;border:1px solid #f00">
  <img src="girlin.jpg" height="120" alt="girl" style="border:1px solid #f0f">
</div>

vll kannst du auch so machen, wenn du border um das bild haben willst.

Inita

[fuzzycontrol]

<div style="text-align:center;border:1px solid #f00">
  <img src="girlin.jpg" height="120" alt="girl" style="border:1px solid #f0f">
</div>

vll kannst du auch so machen, wenn du border um das bild haben willst.

Inita

Gute Idee, das würde wahrscheinlich funktionieren.
Nur gibts da ein zusätzliches Problem: Unter dem Bild soll noch ein Text stehen, welcher den selben Hintergrund  und Breite haben soll, also so:

<div style="text-align:center;border:1px solid #f00">
   <img src="girlin.jpg" height="120" alt="girl" style="border:1px solid #f0f">
   <div>eine Bildunterschrift</div>
</div>

[Inita_]

rehi,

<div style="text-align:center;border:1px solid #f00">
  <img src="girlin.jpg" height="120" alt="girl" style="border:1px solid #f0f;padding-bottom:60px;background:#eee">
  <p style="margin-top:-50px;padding:0">eine Bildunterschrift eine Bildunterschrift<br />eine Bildunterschrift</p>
</div>

so hab ich es gemacht, aber wenn der txt auch von DB kommt, dann ist nicht ganz gut :/

Inita

[fuzzycontrol]

rehi,

<div style="text-align:center;border:1px solid #f00">
  <img src="girlin.jpg" height="120" alt="girl" style="border:1px solid #f0f;padding-bottom:60px;background:#eee">
  <p style="margin-top:-50px;padding:0">eine Bildunterschrift eine Bildunterschrift<br />eine Bildunterschrift</p>
</div>

so hab ich es gemacht, aber wenn der txt auch von DB kommt, dann ist nicht ganz gut :/

Inita

der Text kommt leider aus der DB, hat also dynamische Höhe. Außerdem geht der Text beim FF über den Rand hinaus

[Inita_]

rehi,

der Text kommt leider aus der DB, hat also dynamische Höhe. Außerdem geht der Text beim FF über den Rand hinaus.

Aber <table> willst du nicht benutzen? Dann waer ja bissel einfacher:

<table border="0" cellpadding="0" cellspacing="0" align="center" style="border:1px solid #f0f;background:#eee">
  <tr>
    <td>
      <img src="girlin.jpg" height="120" alt="girl" /><br />
      <p>eine Bildunterschrift eine Bildunterschrift eine Bildunterschrift</p>
    </td>
  </tr>
</table>

ich denke, wenigstens es geht, nur im txt musst du halt <br /> machen.

Inita

[fuzzycontrol]

Aber <table> willst du nicht benutzen? Dann waer ja bissel einfacher:

klar, als Tabelle wäre es ein Kinderspiel ;)
Nur leider wäre es dann die einzige Tabelle auf der geamten Seite, und auch noch zweckentfremdet.
Ich habs jetzt auch erstmal mit table gemacht, notgedrungen und resigniert. Mal sehen ob der Kunde mir das demnächst vor die Füsse wirft ;)