mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 10:05 Benutzername: Passwort: Auto-Login

Thema: Bild skalieren, Höhe vorgegeben, Breite proportional vom 28.04.2008


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bild skalieren, Höhe vorgegeben, Breite proportional
Seite: 1, 2  Weiter
Autor Nachricht
TomRohwer
Threadersteller

Dabei seit: 05.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 28.04.2008 18:01
Titel

Bild skalieren, Höhe vorgegeben, Breite proportional

Antworten mit Zitat Zum Seitenanfang

Für einen bestimmten Zweck möchte ich die Bildgrösse einer JPEG-Datei in der Seitendarstellung reduzieren.

Bild ist z.B. 1000 x 1500 Pixel, es soll aber nur mit 500 x 750 Pixeln auf der Seite angezeigt werden.

Problem dabei: ich brauche ein "globales" Tag, da es sich um eine Template-Seite handelt, die für viele verschiedene Bilder verwendet wird. Und: die Bilder haben unterschiedliche Seitenverhältnisse und unterschiedliche Pixel-Größen.

Ich möchte nun, daß der Browser das Bild auf 500 Pixel Höhe skaliert, und die Breite entsprechend proportional errechnet.

Schreibe ich einfach nur [ height=500" ] und lasse width weg, dann skaliert der Browser die Höhe auf 500 Pixel und lässt die Breite unverändert, geht also nicht.

Schreibe ich [ height="500" width="" ], dann zeigt Firefox das genau wie gewünscht an - 500 Pixel hoch, und die Breite skaliert.

Aber der Internet Explorer (6.0) macht daraus: 500 Pixel hoch, 1 Pixel breit...

Gibt es einen für alle gängigen Browser verständlichen Tag, der die Höhe in Pixel vorgibt und die Breite proportional errechnen lässt?

Oder mittels CSS? (Dann Inline-CSS...)

Die ganze Geschichte ist ein Workaround für eine auf PHP basierende Bilddatenbank - alle MODs, die es dazu gibt, funktionieren nur leider schlicht und einfach nicht richtig. Und mir fehlt a) die Zeit und b) auch das PHP-Know how, um das Ding entsprechend umzugestalten.

Der Workaround wäre vollkommen ausreichend und würde alle Probleme lösen - nur: wie bringt man denverdammten I.E. dazu, Bilder korrekt zu skalieren??? * Nee, nee, nee *

(Die Lösung muß mit I.E. 6.0 und 7.0 funktionieren.)
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 28.04.2008 18:03
Titel

Re: Bild skalieren, Höhe vorgegeben, Breite proportional

Antworten mit Zitat Zum Seitenanfang

TomRohwer hat geschrieben:
chreibe ich einfach nur [ height=500" ] und lasse width weg, dann skaliert der Browser die Höhe auf 500 Pixel und lässt die Breite unverändert, geht also nicht.


Stimmt nicht. Zudem werf einen Blick auf max-width.


Zuletzt bearbeitet von m am Mo 28.04.2008 18:04, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 28.04.2008 18:36
Titel

Re: Bild skalieren, Höhe vorgegeben, Breite proportional

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
TomRohwer hat geschrieben:
chreibe ich einfach nur [ height=500" ] und lasse width weg, dann skaliert der Browser die Höhe auf 500 Pixel und lässt die Breite unverändert, geht also nicht.


Stimmt nicht. Zudem werf einen Blick auf max-width.


Also das mit dem width weglassen stimmt schon. Und IE macht immer Zicken, kommt eben hier drauf an, welche Version gemeint ist.
Und "max-width" wird eben leider auch vom IE6 nicht unterstützt.

Wenn du wirklich eine zuverlässige Methode haben willst, die auch Speicher und Bildgröße spart, machst du am besten mit PHP und der GD Library sog. Thumbnails.
Mit Javascript ginge bestimmt auch, nur habe ich da die Befürchtung, dass es sehr insuffizient ist, wenn jemand JS deaktiviert hat. (Man könnte hier aber die Breite in den "width=''" ynamisch reinschreiben).
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 28.04.2008 19:31
Titel

Re: Bild skalieren, Höhe vorgegeben, Breite proportional

Antworten mit Zitat Zum Seitenanfang

Smooth-Graphics hat geschrieben:
m hat geschrieben:
TomRohwer hat geschrieben:
chreibe ich einfach nur [ height=500" ] und lasse width weg, dann skaliert der Browser die Höhe auf 500 Pixel und lässt die Breite unverändert, geht also nicht.


Stimmt nicht. Zudem werf einen Blick auf max-width.


Also das mit dem width weglassen stimmt schon.


Nein das stimmt definitiv nicht. Du kannst nur eine höhen oder breiten Angabe machen und
das Bild wird proportional skaliert. Wenn das nicht der Fall ist, dann scheint eine andere Angabe
in den Weg geraten zu sein.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 28.04.2008 19:36
Titel

Antworten mit Zitat Zum Seitenanfang

Hmm.. okay, ich glaubs dir. Kanns aber auch grad nich testen *bäh*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
TomRohwer
Threadersteller

Dabei seit: 05.10.2007
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 28.04.2008 22:20
Titel

Re: Bild skalieren, Höhe vorgegeben, Breite proportional

Antworten mit Zitat Zum Seitenanfang

m hat geschrieben:
Smooth-Graphics hat geschrieben:
m hat geschrieben:
TomRohwer hat geschrieben:
chreibe ich einfach nur [ height=500" ] und lasse width weg, dann skaliert der Browser die Höhe auf 500 Pixel und lässt die Breite unverändert, geht also nicht.


Stimmt nicht. Zudem werf einen Blick auf max-width.


Also das mit dem width weglassen stimmt schon.


Nein das stimmt definitiv nicht. Du kannst nur eine höhen oder breiten Angabe machen und
das Bild wird proportional skaliert. Wenn das nicht der Fall ist, dann scheint eine andere Angabe
in den Weg geraten zu sein.

Das ist auch eines der Probleme - die Darstellung muß mit den gängigen Browsern korrekt sein, und dazu gehört auch I.E. 6.0... Ich kann potentielle Kunden schlecht damit nerven, daß sie erstmal einen anderen Browser installieren sollen - zumal sie das an ihren Arbeitsplatzrechnern eh nicht dürfen und auch nicht können.

Zitat:
Wenn du wirklich eine zuverlässige Methode haben willst, die auch Speicher und Bildgröße spart, machst du am besten mit PHP und der GD Library sog. Thumbnails.

Bringt mir leider nichts, ich hab da ein individuelles Problem, das eine individuelle Lösung braucht. (Ich versuche, 4images dazu zu bringen, als Online-Bild-Archiv praxistauglich zu sein...)

Ich habe schon Thumbnails, was ich brauche, ist eine "Triple-Darstellung":

Thumbnails -> Monitor-gerechte Darstellung, also max. 500px (weil noch IPTC-Header und anderes unter dem Bild gezeigt werden muß) -> Feindaten-Download (min. ca. 2000 x 3000px).

Die Kataloge werden aus einer Datenbank generiert, die IPTC-Header auswertet - und zwar die der Mid-Size (500px)-Bilder. Die kann ich also eh nicht über einen Thumbnailer erstellen, weil die die IPTC-Header löschen oder verstümmeln.

Die Lösung ist im Prinzip einfach: die Feindaten-Bilder werden für die Monitor-Darstellung auf 500px Höhe skaliert - die Dateigröße kann in meinem Fall vernachlässigt werden. Der User hat den Katalog mit Thumbs (175px), kann mit Mausklick eine Monitor-gerechte Darstellung mit 500px aufrufen, zu der er die Bild-Daten lesen kann, und wenn gewünscht, kann er mit einem weiteren Mausklick die Feindaten runterladen.

Zitat:
Mit Javascript ginge bestimmt auch, nur habe ich da die Befürchtung, dass es sehr insuffizient ist, wenn jemand JS deaktiviert hat. (Man könnte hier aber die Breite in den "width=''" dynamisch reinschreiben).

Ebend.

Zitat:
Du kannst nur eine höhen oder breiten Angabe machen und
das Bild wird proportional skaliert. Wenn das nicht der Fall ist, dann scheint eine andere Angabe
in den Weg geraten zu sein.

Das klingt interessant - wo könnte die Angabe gemacht werden?

Es geht um ein Template für eine PHP-Ausgabe, das Template ist eine schlichte HTML-Datei mit folgendem Quelltext

Code:
<!-- Template file for JPG Files -->
<img src="{media_src}" border="1" alt="{image_name}"{width_height} /><br />


Das haut das 2000 x 3000px-Bild in Originalgrösse in die Seite rein.

Geändert habe ich das testhalber auf:

Code:
<!-- Template file for JPG Files -->
<img src="{media_src}" height="500" width="" border="1" alt="{image_name}"{width_height} /><br />


Damit ist, wie gesagt Mozilla glücklich und zeigt das Bild 500px hoch und skaliert in der Breite korrekt.
I.E. 6.0 zeigt das Bild 500px hoch - und 1px breit.

Lasse ich width ganz weg, zeigen Mozilla und I.E. das Bild 500px hoch und original breit, verzerren es also.


Zuletzt bearbeitet von TomRohwer am Mo 28.04.2008 22:28, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 28.04.2008 22:45
Titel

Antworten mit Zitat Zum Seitenanfang

Ich ging davon aus du redest von CSS width/height Werten.

Und du solltest dass auch mit CSS regeln. Ändere das Template
so ab dass die Grafiken eine Klasse erhalten.

Code:
<img src="" class="deineKlasse" />


und füge dem Stylesheet diese Regel hinzu:
Code:

.deineKlasse {
   width: 500px;
}


oder inline

Code:
<img src="logo.gif" style="height: 500px;" />


Zuletzt bearbeitet von m am Mo 28.04.2008 22:56, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
pRiMUS

Dabei seit: 09.09.2003
Ort: Vienna
Alter: 48
Geschlecht: Männlich
Verfasst Di 29.04.2008 06:45
Titel

Antworten mit Zitat Zum Seitenanfang

du redest einerseits von "potentiellen kunden" die du nicht vergraulen willst, wegen problemen mit dem IE6, und andererseits skalierst du bilder via css/html angaben von 2000x3000px auf 500px runter? da beisst sich was.

1. qualität
2. geschwindigkeit

tu dir selbst den gefallen und versuche die lösung via php/gdlib oder imagemagick. alles andere ist unsinn.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen bild zuerst auf 100% höhe skalieren, danach repeat-x
DIV Proportional skalieren, bzw. Größe von IMG annehmen
[CSS] Hintergrundgrafik 100% Höhe und Breite
Breite und Höhe eines SWF auslesen
Illustrator CS3 Web Dokument - Breite und Höhe ändern
SVGs mit gleicher Breite, aber unterschiedlicher Höhe
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.