Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

/ Forum / Webseiten/HTML

Webseiten/HTML

Fragevon KeDie92 vom 06.03.2022, 00:39 Options

HTML Tabelle --> Hintegrundbild für eine Zelle strecken/quetschen, nur wie?

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

Antwort schreiben

Antwort 1 von Merlin59 vom 06.03.2022, 01:05 Options

Hi,

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

Beispiel:

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

mfg,
Merlin

Antwort 2 von KeDie92 vom 06.03.2022, 01:09 Options

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! :-)

Antwort 3 von Merlin59 vom 06.03.2022, 03:13 Options

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.

Antwort 4 von KeDie92 vom 06.03.2022, 10:05 Options

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?

Antwort 5 von KeDie92 vom 06.03.2022, 10:09 Options

Ich geb hier mal meinen Code an, in denen das Bild als Background einer Zelle angezeigt werden soll:

<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...

Antwort 6 von MaryMoon vom 06.03.2022, 10:11 Options

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

Antwort 7 von MaryMoon vom 06.03.2022, 10:12 Options

.... 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

Antwort 8 von gast42 vom 06.03.2022, 10:18 Options

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.

Antwort 9 von KeDie92 vom 06.03.2022, 10:36 Options

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)...

Antwort 10 von Merlin59 vom 06.03.2022, 10:51 Options

dann mach die Zellen doch gleich groß:

<TD width="12,5%" ... >

und skaliere die Bilder entsprechend. Mit IrfanView geht das ganz einfach.

Antwort 11 von gast42 vom 06.03.2022, 11:29 Options

Die CSS-Eigenschaft background lässt mehr zu als Farben (was habt ihr denn für einen murksigen Unterricht - manchen Lehrern sollte man das Unterrichten verbieten). Lies also bitte nach!

Mit diesem Link und dem aus der obigen Antwort solltest du versuchen können dein Problem zu lösen. Lesen musst du selbst!

Antwort 12 von Merlin59 vom 06.03.2022, 11:34 Options

@gast42:

Da ist der Lehrer schuldlos:

Zitat:
... wir arbeiten ja eig. noch nicht mit CSS ...

;-)

Antwort 13 von gast42 vom 06.03.2022, 11:39 Options

Zitat:
Da ist der Lehrer schuldlos:

nein! Wer Schülern HTML-Formatierung beibringt ist pädagogisch auf dem Holzweg! Alles was seine Schüler jetzt produzieren (können) ist Müll! Und das ist seine Schuld, wenn er ihnen die Trennung von Inhalt (HTML) und Form (CSS) nicht von vornherein erklärt.

Antwort 14 von KeDie92 vom 06.03.2022, 12:03 Options

OK, danke :-) Hat super funktioniert, hätte ich eig. selber drauf kommen können...sorry...

Gruß Kevin

Antwort 15 von Merlin59 vom 06.03.2022, 12:09 Options

Zitat:
Hat super funktioniert

Was denn?

Antwort 16 von KeDie92 vom 07.03.2022, 15:46 Options

Na das mit dem Zellen-Hintergrundbild...hab eig. viel zu kompliziert gedacht, aber ich musste ja einfach nur angeben, wie lang etwas sein soll, jetzt hat alles super funktioniert! :-)

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..

Neue Einträge

Tipp einschicken

News einschicken