Relative Bildhöhe deffinieren CSS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anpassen
aufwand
bild
bildschirm
brauche
break
button
code
dank
http
image
niemand
parameter
pfad
problem
prozent
schrift
tag
url
vorstellen
-
Hallo.
Folgende Frage: Gibt es einen Weg mit CSS (oder auch sonst irgendwie [HTML oder JavaScript]) die relative Höhe eines tag/bild">Bildes zu deffinieren? Hab schon überall gesucht aber es scheint da keinen Weg zu geben, was ich mir aber irgendwie nicht vorstellen kann.. Danke für eure Hilfe.
Beitrag zuletzt geändert: 15.8.2011 14:41:53 von yorecords -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Am unkompliziertesten wird es sein, dem img-Tag einfach nur die Breite mitzuteilen:
<img src="bild.ext" width="250" alt="" />
Der fehlende Wert wird propotional zum festgelegten Wert gesetzt.
Das sollte mit CSS genau so gehen.
Dass man Bilder aber nicht in der HTML-Ausgabe in ihrer Größe verändern soll, brauche ich dir hoffentlich nicht zu sagen :)
Beitrag zuletzt geändert: 15.8.2011 15:06:21 von fabo -
fabo schrieb:
Am unkompliziertesten wird es sein, dem img-Tag einfach nur die Breite mitzuteilen:
<img src="bild.ext" width="250" alt="" />
Der fehlende Wert wird propotional zum festgelegten Wert gesetzt.
Das sollte mit CSS genau so gehen.
Dass man Bilder aber nicht in der HTML-Ausgabe in ihrer Größe verändern soll, brauche ich dir hoffentlich nicht zu sagen :)
Ne aber ich muss die relative Höhe angeben. Anders gehts nicht.
Wieso soll man keine Bilder mit HTML verändern? Das mach ich normal immer und mir wäre noch nie aufgefallen dass es da ein Problem gibt. -
yorecords schrieb:
Weil das in fast allen Fällen nicht Aufgabe von HTML ist. Außerdem werden so zu große Bilder übertragen, was unnötigen Traffic verursacht.
Wieso soll man keine Bilder mit HTML verändern? Das mach ich normal immer und mir wäre noch nie aufgefallen dass es da ein Problem gibt. -
Aha, ok.. Naja aber das muss ich jetzt ja sowieso umstellen. Aber dafür brauche ich einen Befehl für die relative Höhe. Das kann ja nicht sein dass das echt nicht funktioniert... Ich find nirgends was brauchbares. .
-
drafed-map schrieb:
Wieso willst du das nicht von PHP oder von einem Programm auf dem Computer (auch hier ist es dank PHP CLI möglich, dafür PHP zu verwenden) erledigen lassen?
Edit: Hier findest du genau so einen Code.
Puuuh.. Ich kenn mich in PHP überhaupt nicht aus. Es muss doch einen einfacheren Weg geben.. Wieso sollte man die Breite relativ deffinieren können aber die Höhe nicht?! Das kann ich mir nicht vorstellen. -
Irgendwie verstehe ich dein Problem nicht. Man kann auch die Höhe relativ definieren mit {height: xx%;}. Bsp. hier (Browserfenster mal vergrößern und verkleinern).
Wenn du ein anderes Problem hast, dann bitte beschreibe es genauer.
Beitrag zuletzt geändert: 15.8.2011 20:59:10 von kaetzle7 -
kaetzle7 schrieb:
Irgendwie verstehe ich dein Problem nicht. Man kann auch die Höhe relativ definieren mit {height: xx%;}. Bsp. hier (Browserfenster mal vergrößern und verkleinern).
Wenn du ein anderes Problem hast, dann bitte beschreibe es genauer.
Das hab ich natürlich als erstes versucht. Funktioniert bei mir aber nicht.. Kanns sein dass das was damit zu tun hat dass ich Frames verwende? Das ist nämlich der einzige Unterschied zu deiner Version.. -
Andererseits bin ich mir eigentlich ziemlich sicher dass es nicht daran liegt, da ich im leftFrame die buttons auch relativ deffiniert hab, aber halt mit width. Und dass das nur an height liegt kann ich mir wieder nicht vorstellen..
schnookerippsche schrieb:
Das kann sein, aber niemand verwendet mehr Frames. Ersetze also erst die Frames durch divs und teste es erneut.
Wollt es eh schon machen, hab mich dann aber aus verschiedenen Gründen doch dagegen entschieden. Einer davon ist dass ich mich noch nicht so gut mit divs auskenne und es viel Zeit in Anspruch nehmen würde die ganze Seite umzugestalten.
Beitrag zuletzt geändert: 15.8.2011 21:49:31 von yorecords -
Wie schon gesagt: du musst uns mehr Informationen geben. Wenn es bei dir überall geht und nur auf einer Seite nicht, dann müssen wir wissen wo es nicht geht. Verlinke die Seite auf der du das Problem hast oder poste den Code. Bei dir sind doch komplett alle Bilder relativ definiert, außer der Hintergrund deiner Buttons - liegt da das Problem?
Ein ganz allgemeiner Tipp, der aber etwas Off-Topic ist: sieh dir doch mal ein paar moderne Seiten an und schau wie sie aufgebaut und farblich gestaltet sind. Deine Seite erinnert mich an die 90er (es fehlen nur noch die wackelnden und blinkenden gif-Animationen). Jede Seite scheint eine andere Schriftart und -größe zu haben, welche obendrein noch oft fast unmöglich zu lesen ist. Auch eine Seite mit relativer Größe gestaltet heute niemand mehr - auf einem 23" Bildschirm erschlagen einen doch die riesigen Buttons... Du hast schon viel und guten Inhalt, musst ihn aber auch gut präsentieren.
Du machst dir viel Arbeit mit der Seite - es wäre doch schade, wenn alle die deine Startseite sehen, sofort wieder verschwinden, weil ihnen die Augen ganz einfach weh tun... Nix für ungut, aber so werden wohl die meisten denken, die diese Seite sehen... -
kaetzle7 schrieb:
Wie schon gesagt: du musst uns mehr Informationen geben. Wenn es bei dir überall geht und nur auf einer Seite nicht, dann müssen wir wissen wo es nicht geht. Verlinke die Seite auf der du das Problem hast oder poste den Code. Bei dir sind doch komplett alle Bilder relativ definiert, außer der Hintergrund deiner Buttons - liegt da das Problem?
Ein ganz allgemeiner Tipp, der aber etwas Off-Topic ist: sieh dir doch mal ein paar moderne Seiten an und schau wie sie aufgebaut und farblich gestaltet sind. Deine Seite erinnert mich an die 90er (es fehlen nur noch die wackelnden und blinkenden gif-Animationen). Jede Seite scheint eine andere Schriftart und -größe zu haben, welche obendrein noch oft fast unmöglich zu lesen ist. Auch eine Seite mit relativer Größe gestaltet heute niemand mehr - auf einem 23" Bildschirm erschlagen einen doch die riesigen Buttons... Du hast schon viel und guten Inhalt, musst ihn aber auch gut präsentieren.
Du machst dir viel Arbeit mit der Seite - es wäre doch schade, wenn alle die deine Startseite sehen, sofort wieder verschwinden, weil ihnen die Augen ganz einfach weh tun... Nix für ungut, aber so werden wohl die meisten denken, die diese Seite sehen...
Also das Problem hab ich auf meiner Seite unter "Pics". Die Miniaturbilder unten würde ich gerne so anpassen.
Meine Website befindet sich noch in der Entwicklungsphase, wobei ich aber die relativer Größe für eine ziemlich gute Idee halte. Klar sind auf einem größeren Monitor auch die Buttons größer, aber ich finde dass das ziemlich gut passen dürfte (wobei ich dazusagen muss dass ich sie noch nie auf einem bedeutend größeren Bildschirm gesehen habe). Aber schließlich wird doch einfach die ganze Seite größer und dem Monitor angepasst. Würde anders glaub ich schlimmer aussehen.
Wo ist die Schrift nicht gut lesbar? Meinst du unter "News & Dates" und "Music" ? Kann ich mir bei näherer Betrachtung gut vorstellen dass das für jemanden der nicht weiß was da steht schwierig werden könnte.. Wird sofort ausgebessert. Danke für den Tipp.
Beitrag zuletzt geändert: 16.8.2011 0:27:37 von yorecords -
yorecords schrieb:
In der Zeile
Also das Problem hab ich auf meiner Seite unter "Pics". Die Miniaturbilder unten würde ich gerne so anpassen.
hast du deiner Bildervorschau doch schon eine fixe Höhe zugewiesen, deswegen hat eine relative Höhe bei deinen Bilder keine Auswirkung. Du könntest es ja mal mit<frameset border="1" frameborder="YES" rows="*,130">
versuchen und den Bildern dann eine relative Höhe zuweisen, vielleicht funktioniert das ja...rows="*, 20%"
Wo ist die Schrift nicht gut lesbar? Meinst du unter "News & Dates" und "Music" ? Kann ich mir bei näherer Betrachtung gut vorstellen dass das für jemanden der nicht weiß was da steht schwierig werden könnte.. Wird sofort ausgebessert. Danke für den Tipp.
Auch unter "Lyrics" ist sie nicht gut lesbar. Gerade Texte die gelesen werden sollten, sollte man mit einer leicht lesbaren Schrift (Times New Roman, Arial,...) anzeigen lassen. Das sieht dann zwar nicht mehr so "stylish" aus, erfüllt aber den Zweck... -
kaetzle7 schrieb:
yorecords schrieb:
In der Zeile
Also das Problem hab ich auf meiner Seite unter "Pics". Die Miniaturbilder unten würde ich gerne so anpassen.
hast du deiner Bildervorschau doch schon eine fixe Höhe zugewiesen, deswegen hat eine relative Höhe bei deinen Bilder keine Auswirkung. Du könntest es ja mal mit<frameset border="1" frameborder="YES" rows="*,130">
versuchen und den Bildern dann eine relative Höhe zuweisen, vielleicht funktioniert das ja...rows="*, 20%"
Das hab ich natürlich bei der umstellung auch gemacht. Hat aber nichts genützt.. Ich glaub mittlerweile dass es an der Tabelle liegt. Hab das selbe unter "Music" versucht, funktioniert aber auch nicht. Gibt es einen Befehl für die Tabelle dass sie sich mitanpasst?
kaetzle7 schrieb:
Auch unter "Lyrics" ist sie nicht gut lesbar. Gerade Texte die gelesen werden sollten, sollte man mit einer leicht lesbaren Schrift (Times New Roman, Arial,...) anzeigen lassen. Das sieht dann zwar nicht mehr so "stylish" aus, erfüllt aber den Zweck...
Ja, hab ich gestern auch noch ausgebessert. Zwar ist die Schrift die gleiche, aber der Text ist größer. Jetzt müsste es eigentlich gut lesbar sein.
Beitrag zuletzt geändert: 16.8.2011 16:06:48 von yorecords -
eine relative Höhe mit dem css-Wert 'height' ist soweit ich weis nicht bei allen Browsern standart. Allerdings sollte der Wert max-heigh genau das erziehlen.
img{ max-height:50px; }
MFG -
programtools schrieb:
eine relative Höhe mit dem css-Wert 'height' ist soweit ich weis nicht bei allen Browsern standart. Allerdings sollte der Wert max-heigh genau das erziehlen.
img{ max-height:50px; }
MFG
Danke, aber ich glaub ich hab das schon so versucht, halt nur mit %. Hat aber nicht funktioniert. Ich müsste die Bilder an einen Frame anpassen der 20% hoch ist. Wäre super wenn du da eine Idee hättest. -
okay dann lös es mit einem PHP-script (vorrausgesetzt du hast php zur verfügung).
Dem Script übergibst du dann den Bild-pfad als Parameter. Dein Image-Tag würde in etwa so aussehen:
*.html / *.php
[..] <img src="imgconverter.php?src=grafiken*bild.png&percent=20" /> [..]
Jedes Slash muss durch ein Sternchen ersetzt werden, da du als Parameter so keine slashs übergeben darfst
(ist jetzt mal ne einfache Lösung geht natürlich auch eleganzer bloß eben mit mehr Aufwand)
Das Script sähe in etwa so aus:
imgconverter.php
<?php header("Content-type: image/png"); $path = "../".str_replace('*','/',$_GET['src']); // ./ wegen Unterverzeichniss !! $img = $path; if (@file_exists($img)) { $percent = $_GET['percent']; $w = $_GET['w']; $h = $_GET['h']; } else { $img = 'grafiken/notfound.jpg'; $percent = 100; } $x = @getimagesize($img); $sw = $x[0]; $sh = $x[1]; if ($percent > 0) { $percent = $percent * 0.01; $w = $sw * $percent; $h = $sh * $percent; } else { if (isset($w) and !isset($h)) { $h = (100 / ($sw / $w)) * .01; $h = @round($sh * $h); } elseif (isset($h) and !isset($w)) { $w = (100 / ($sh / $h)) * .01; $w = @round($sw * $w); } } switch($x["mime"]) { case "image/jpeg": $im = @imagecreatefromjpeg($img); break; case "image/gif": $im = @imagecreatefromgif($img); break; case "image/png": $im = @imagecreatefrompng($img); break; default: $im = false; break; } if($im) { $thumb = @imagecreatetruecolor($w, $h); @imagecopyresampled($thumb, $im, 0, 0, 0, 0, $w, $h, $sw, $sh); @imagepng($thumb); } ?>
dem script kannst du percent, h und w als Parameter übergeben.
Allerdings ist Prozent dann im verhältniss zum Bild nicht zu deinem Frame. MAch doch eine feste Größe für das Frame, dann hat auch jeder der sich das Bild anschaut edie gleiche Bildgröße.
MFG -
programtools schrieb:
okay dann lös es mit einem PHP-script (vorrausgesetzt du hast php zur verfügung).
Dem Script übergibst du dann den Bild-pfad als Parameter. Dein Image-Tag würde in etwa so aussehen:
*.html / *.php
[..] <img src="imgconverter.php?src=grafiken*bild.png&percent=20" /> [..]
Jedes Slash muss durch ein Sternchen ersetzt werden, da du als Parameter so keine slashs übergeben darfst
(ist jetzt mal ne einfache Lösung geht natürlich auch eleganzer bloß eben mit mehr Aufwand)
Das Script sähe in etwa so aus:
imgconverter.php
<?php header("Content-type: image/png"); $path = "../".str_replace('*','/',$_GET['src']); // ./ wegen Unterverzeichniss !! $img = $path; if (@file_exists($img)) { $percent = $_GET['percent']; $w = $_GET['w']; $h = $_GET['h']; } else { $img = 'grafiken/notfound.jpg'; $percent = 100; } $x = @getimagesize($img); $sw = $x[0]; $sh = $x[1]; if ($percent > 0) { $percent = $percent * 0.01; $w = $sw * $percent; $h = $sh * $percent; } else { if (isset($w) and !isset($h)) { $h = (100 / ($sw / $w)) * .01; $h = @round($sh * $h); } elseif (isset($h) and !isset($w)) { $w = (100 / ($sh / $h)) * .01; $w = @round($sw * $w); } } switch($x["mime"]) { case "image/jpeg": $im = @imagecreatefromjpeg($img); break; case "image/gif": $im = @imagecreatefromgif($img); break; case "image/png": $im = @imagecreatefrompng($img); break; default: $im = false; break; } if($im) { $thumb = @imagecreatetruecolor($w, $h); @imagecopyresampled($thumb, $im, 0, 0, 0, 0, $w, $h, $sw, $sh); @imagepng($thumb); } ?>
dem script kannst du percent, h und w als Parameter übergeben.
Allerdings ist Prozent dann im verhältniss zum Bild nicht zu deinem Frame. MAch doch eine feste Größe für das Frame, dann hat auch jeder der sich das Bild anschaut edie gleiche Bildgröße.
MFG
Naja, danke für die Antwort, nur kenn ich mich mit PHP leider gar nicht aus... Anscheinend gibt es wirklich keine einfache Lösung für dieses Problem, also werd ich es einfach so belassen wie es eh schon ist: mit fixer Größe.
Wollt nur eigentlich meine ganze Seite mit relativer Größe gestalten, hab auch schon alles so, bis auf diesen Teil.. Naja..
Danke jedenfalls. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
