5.2k Aufrufe
Gefragt in Webseiten HTML von
Hallo,

wir sollen in Informatik einen Kalender in HTML erstellen. Diesen habe ich schon ganz gut ausgebaut (mit Tabelle eben), jedoch möchte ich den jetzt noch etwas optisch gestalten.
Hierzu möchte ich für jede Zelle ein kleines Hintegrundbild haben. Nur sind einige Hintegrundbilder ziehmlich groß...kann man mit Hilfe von CSS irgendwie diese Bilder auf die genaue Größe der Zelle bringen ohne die manuell in einem Grafikeditor zu bearbeiten?

Gruß Kevin

16 Antworten

0 Punkte
Beantwortet von merlin59 Experte (2.8k Punkte)
Hi,

<img src="Pfad" width="gewünschte Breite in Pixeln" height="gewünschte Höhe in Pixeln" alt="Bildbeschreibung">


Beispiel:
<img src="https://supportnet.de/image/logo.jpg" width="430" height="45" alt="SN-Logo">


mfg,
Merlin
0 Punkte
Beantwortet von
Aber ich weiß doch leider nicht, wie groß so eine Zelle ist, deswegen bräuchte ich einen Befehl, der das Bild optimal an die Größe der Zelle anpasst, also die Längen- und Breitenverhätlnisse des Bildes mit denen der Zelle gleichsetzt...gibt es da etwas? Egal wie kompliziert...
Trozdem vielen Dank schonmal für die Antwort, Merlin! :-)
0 Punkte
Beantwortet von merlin59 Experte (2.8k Punkte)
Dann verwende eine relative Größenangabe, z.B. width="100%", damit müsste das Bild über die gesamte Zellenbreite angezeigt werden. Die Höhe wird hierbei proportional angepasst.

Wenn du width="100%" und height="100%" angibst, sollte die Zelle ausgefüllt werden, was dann aber zu Verzerrungen führt.
0 Punkte
Beantwortet von
Wenn ich Width und Height angebe, dann wird aber leider die Zelle so groß wie das Bild...ich würde aber gerne das Bild so groß haben wie die Zelle, also wenn z.B. das Bild 800 x 600 groß ist und die Zelle nur ungefähr 100 x 200 ist, dann soll sich das Bild auf 100 x 200 verkleinern und genau den Längen- und Breitenverhätlnissen anpassen...im Internet hab ich überall gelesen, dass dies nicht möglich sei....kann ich mir aber nicht vorstellen bei der heutigen Entwicklung....geht doch sicher mit CSS, oder?
0 Punkte
Beantwortet von
Ich geb hier mal meinen Code an, in denen das Bild als Background einer Zelle angezeigt werden soll:

[code]

<TR>
<TH COLSPAN="8" BACKGROUND="C:\Dokumente und Einstellungen\KeV\Desktop\HTML\Kalender\images\1.jpg">
<B>
<FONT SIZE="+3">Januar</FONT>
</B>
</TH>
</TR>

Bis jetzt sieht man ja leider nur damit die obere linke Ecke des Bildes...es soll sich aber der Zelle anpassen...
0 Punkte
Beantwortet von marymoon Mitglied (107 Punkte)
Hiho,
das ließe sich machen, aber mal ehrlich:
Warum passt Du die Bildgröße nicht an??
Wenn Di das in einer Tabelle machst, die 5 Zellen mit solchen Bildern lädt, dann dauert es eine Weile, bis die Seite aufgebaut ist, weil Bilder in der Größe 200*100 eben deutlich kleiner sind als 800*600 und somit schneller geladen werden.
Alles andere ist wenig sinnvoll.
Alternativ erstellst Du entsprechende Thumbnails für die Bilder und versiehst sie mit einem Link auf das Bild in Originalgröße. Dann kann jeder selbst entscheiden, ob er auf das Laden der Bilder warten will oder nicht ;-)
mfg
0 Punkte
Beantwortet von marymoon Mitglied (107 Punkte)
.... und dann halt mit fixen Werten für die Breite arbeiten, sonst fliegt dir das Layout bei mehreren Bildern eh um die Ohren :D

mfg
0 Punkte
Beantwortet von
Dein Code ist grauslig (HTML-Steinzeit)!

Dein Problem ist aber leider kaum lösbar, HG-Bilder werden im derzeitigen CSS-Standard immer in ihrer eigenen Größe angezeigt.

Allerdings kannst du dich gern mit dem in Entwicklung befindlichen CSS 3 Ansatz zu background-size versuchen.
0 Punkte
Beantwortet von
Tut mir Leid für den grausigen Code, bin noch ein ziehmlicher Anfänger, habe erst seit diesem Schuljahr HTML...wir arbeiten ja eig. noch nicht mit CSS und Backgrounds für Zellen, jedoch finde ich da eine einfache Farbe zu simpel...
Und die Bildgröße kann ich leider nicht anpassen, weil ich nicht weiß, wie groß jede einzelne Zelle ist...denn in einer Zelle, in der "Donnerstag" steht, ist diese Zelle auf etwas breiter...ich gebe mal mehr Code an, um es verständlicher zu machen...


<HTML>
<HEAD>
<TITLE>Kalender</TITLE>
</HEAD>
<BODY bgcolor="#0060FF">
<H1 ALIGN="center">
<U>Kalender 2010</U>
</H1>
<BR>
<BR>
<TABLE WIDTH="1200" HEIGHT="100%" BORDER="1" ALIGN="center">
<TR>
<TH COLSPAN="8" BACKGROUND="C:\Dokumente und Einstellungen\KeV\Desktop\HTML\Kalender\images\1.jpg">
<B>
<FONT SIZE="+3">Januar</FONT>
</B>
</TH>
</TR>
<TR>
<TD ALIGN="center">
<B>Woche</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Montag</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Dienstag</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Mittwoch</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Donnerstag</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Freitag</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Samstag</B>
</TD>
<TD ALIGN="center" BGCOLOR="#00A0FF">
<B>Sonntag</B>
</TD>
</TR>


Ist jetzt nur nicht beendet, aber das wäre ein Teil der HTML-Datei, und für die einzelnen Farben der Zellen, wo dann die Wochennamen erscheinen, sollen Bilder zu sehen sein, die sich der Größe der Zelle anpassen, weil ja jede Zelle irgendwie anders groß ist (besonders eben der Donnerstag)...
0 Punkte
Beantwortet von merlin59 Experte (2.8k Punkte)
dann mach die Zellen doch gleich groß:
<TD width="12,5%" ... >
und skaliere die Bilder entsprechend. Mit IrfanView geht das ganz einfach.
...