Img im div Container an größe anpassen...

Beitrag von **anotherseo** » 23.12.2011, 09:16

ich sitze gerade an einem Problem und hoffe auf eure Hilfe.

Ich möchte ein Bild innerhalb einem div Container floaten und möchte, dass das Bild immer die gleiche Höhe hat wie der Container, der sich in der Höhe dem Text anpasst. Auf manchen PCs, unabhängig vom Browser ist Arial oder ein andere Serifen Schrift installiert (Linux, Mac) und dies führt dazu das der Text unterschiedlich lang ist und so entsprechend der Container manchmal eine andere Höhe hat.

Code:

<div>
<img w= y= float:right>
<p>Text</p>
</div>

Eine Lösung wäre alle eine bestimmte Schrift zu benutzen mit Webfonts etwa. Oder jedem Container eine feste Höhe geben, aber das wäre umständlich.

Meine Frage wäre, geht das überhaupt was ich will?
Mache ich einen Denkfehler?

Bin dankbar für Ideen...

von **Anzeige von ABAKUS** »

Beitrag von **whyte** » 23.12.2011, 12:57

css, background-image ...
das Bild soll aber unterschiedlich groß sein?

Soll die Schrift unter dem Bild stehen wie in deinem Beispiel?
Ansonsten, hast du jquery eingebunden, damit ginge es wohl ...

Beitrag von **anotherseo** » 23.12.2011, 14:48

Danke whyte für deine Hilfe.

Das Bild wird per float rechts den Text umfließen und der div container hat eine Hintergrundfarbe.

Also:

<div>
<img width=200px height=500px style="float:right;">
<p style="background-color:#ff00ff;">Lorem Ipsum</p>
</div>

Die Bildhöhe ist der Textmenge in Arial angepasst, aber wenn der Browser eine andere Serifen Schrift nimmt, weil Arial nicht da ist, ist plötzlich die Textmenge in der Höhe weniger oder mehr. Und genau dann soll das Bild in der Höhe angepasst sein.

Ich hoffe ich konnte es einigermaßen rüberbringen.

Beste Grüße

Beitrag von **Melegrian** » 23.12.2011, 15:24

Du gibst beim Container in der Höhe height 500px vor. Und wie formatierst Du die Schrift? Wenn Pixel, dann in diesem Fall alles in Pixel, Umrechnung 1pt x 1,333 oder 1,34px, dann noch mit line-height arbeiten, um den Inhalt im Div auszurichten und für die Schrift ebenfalls line-height angeben oder so ähnlich. Alles in Pixel, damit das Verhältnis zueinander auf einer Maßeinheit beruht, dann sollte es wohl klappen, habe es jetzt nicht ausprobiert.

Beim Mac lese ich jetzt widersprüchliche Angaben, einmal das Arial vorinstalliert ist und einmal, dass Arial nicht installiert ist. Doch wie verhält es sich, falls nicht vorinstalliert?

Es gibt doch die Möglichkeit bei

Code: Alles auswählen

style="font-family&#58; Arial,Helvetica"

eine Ersatzschrift gleich mit anzugeben. Also zum Mac gehört Helvetica und Helvetica ist gegen Arial austauschbar, wenn ich das bisher richtig verstanden habe.

Beitrag von **anotherseo** » 23.12.2011, 21:24

Wenn ich dem div Container eine feste Höhe gebe habe ich die Sorgen nicht, aber dann hat auf jeder Seite dieser bestimmte Container immer eine andere höhe, und dies muss ich dann im CSS Code angeben.

Anscheinend bleibt mir nichts anderes übrig,

Beitrag von **Melegrian** » 23.12.2011, 23:53

Nicht unbedingt, wenn Du Dich entschließend könntest Bild und Text nebeneinander aber getrennt unterzubringen. Müsste mich erst einmal wieder hineinfinden, da ich lange nichts mit JavaScript gemacht habe, doch so in etwa (nur ganz grob) könnte es funktionieren.

Die Höhe des Bildes passt sich dem Text an, soweit ist es gut. Nur wenn ich dem Div vom Textfeld noch eine bestimmte Breite zuordne, verschluckter er sich wieder, was ja nicht passieren darf.

Code: Alles auswählen

<!DOCTYPE html ....>
<html>

<head>
<title>Testseite</title>
</head>

<body onload="document.getElementById&#40;'bild'&#41;.style.height=&#40;document.getElementById&#40;'textfeld'&#41;.offsetHeight&#41;+'px'">

<div style="float&#58; left"><img src="bilder/testbild.png" alt="Bild" width="140" id="bild"></div>
<div id="textfeld">
<p>Text.....</p>
</div>
</body>
</html>

Beitrag von **Melegrian** » 24.12.2011, 10:17

So funktioniert das Beispiel und das Bild passt sich an die Höhe des Textes an. Nun brauchtest Du Dir nur noch etwas einfallen lassen, für den Fall das JavaScript deaktiviert ist. Eventuell eine gewisse Mindesthöhe für das Bild vorgeben oder so.

Code: Alles auswählen

<!DOCTYPE html ....>
<html>

<head>
<title>Testseite</title>
</head>

<body onload="document.getElementById&#40;'bild'&#41;.style.height=&#40;document.getElementById&#40;'textfeld'&#41;.offsetHeight&#41;+'px'">

<div style="float&#58; left; border&#58; 1px solid #00ff00"><img src="bilder/testbild.png" alt="Bild" width="140" id="bild"></div>
<div id="textfeld" style="float&#58; left; border&#58; 1px solid #000000; margin-left&#58; 8px; width&#58; 300px">
<p style="margin&#58; 0px">Text.....</p>
</div>
</body>
</html>

Beitrag von **unawave** » 28.12.2011, 12:45

@Melegrian:
Interessanter Ansatz, den du da skizziert hast.

Allerdings: Verwendet man als "testbild.png" ein Foto, dann wird es verzerrt. Weil: Feste Breite width="140". Entfernt man width="140" dann passt sich das Bild proportional an.

Und im Vorschlag 2: Lässt man beim Textfeld das "width: 300px" weg, dann passt sich der Text dem verbleibenden Platz an - also unabhängig von der Browser-Breite.

Beitrag von **Melegrian** » 28.12.2011, 20:02

@unawave - Verbessern lässt es sich sicherlich noch. Habe es jetzt nicht getestet, doch denke ich mir, wenn keine von beiden Breiten vorgegeben ist, so richtet sich die Breite und daraus resultierende Höhe des Textes beim Laden der Seite nach dem noch nicht skalierten Bild. Der Event-Handler onload reagiert ja erst, wenn die Seite bereits vollständig geladen ist. Dadurch, dass das Bild erst nach dem vollständigen Laden der Seite skaliert wird, könnte der Text wieder etwas zu kurz oder zu lang sein.

Müsste man halt testen, was für den jeweiligen Einsatzzweck am geeignetsten ist. Wird hingegen das Textfeld in der Breite begrenzt, eventuell auch in Prozent, so kann der Text nach der Skalierung des Bildes nicht breiter oder schmaler werden und dadurch nach onlad seine Höhe verändern. Ist jetzt alles nicht getestet, doch mit der Überlegung würde ich es testen.