mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 13:42 Benutzername: Passwort: Auto-Login

Thema: Bilder (jpg`s) "VERLUSTFREI" mittels CSS skalieren vom 24.06.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Bilder (jpg`s) "VERLUSTFREI" mittels CSS skalieren
Seite: 1, 2, 3  Weiter
Autor Nachricht
nb79
Threadersteller

Dabei seit: 09.07.2002
Ort: berlin
Alter: -
Geschlecht: Weiblich
Verfasst Mi 24.06.2009 14:01
Titel

Bilder (jpg`s) "VERLUSTFREI" mittels CSS skalieren

Antworten mit Zitat Zum Seitenanfang

Hallo, vielleicht kann mir jemand weiter helfen.
Ich habe 4 jpg`s. alle ein und das gleiche Motiv, halt in unterschiedlichen Größen.
Wie kann ich nun mittels CSS (oder sogar via JS) 1 Bild verwenden, was ich dann auf
verschiedene Größen skalieren kann. Geht das irgendwie? Ohne das sie an Qualität verlieren!

Hab schon so einiges gegoogle'elt - ohne Erforlg * Such, Fiffi, such! *
Für Eure Hilfe wäre ich Euch sehr dankbar.
LG
  View user's profile Private Nachricht senden
willshedo

Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
Verfasst Mi 24.06.2009 19:40
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,

per Css geht da nicht viel, höchstens das größte Bild nehmen, viermal kopieren, jedem eine eigene Id geben und den IDs dann jeweils die gewünschte height und width.


Mit JS gibt es ein par Möglichkeiten, je nach Anwendungszweck. Das Bild wird im Browser aber sowieso nur einmal geladen, macht also nicht mehr Datenverkehr... die ganzen Kunststücke brauchts also eigentlich nicht.

Edith sagt: hier gibts JS zum Ausprobieren

Grüße,
Chris


Zuletzt bearbeitet von willshedo am Mi 24.06.2009 19:50, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
benedict r.

Dabei seit: 07.06.2007
Ort: Friedberg (Hessen)
Alter: 33
Geschlecht: Männlich
Verfasst Mi 24.06.2009 20:30
Titel

Antworten mit Zitat Zum Seitenanfang

Eine Möglichkeit, das ganze Verlustfrei zu skalieren
gibt es denke ich nicht. Höchstens via PHP-Skript.

Eine Alternative wäre natürlich das Nachladen per
JavaScript, oder die Verwendung einer einzigen
Hintergrund-Grafik, die alle vier Skalierungs-Stufen
enthält. Diese Grafik wird dann beliebig verschoben
und das HTML-Element dazu noch vergrößert/ver-
kleinert. Nach diesem Prinzip.

Grüße,
Benedikt


Zuletzt bearbeitet von benedict r. am Mi 24.06.2009 20:31, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.06.2009 21:59
Titel

Antworten mit Zitat Zum Seitenanfang

benedict r. hat geschrieben:
Eine Möglichkeit, das ganze Verlustfrei zu skalieren
gibt es denke ich nicht. Höchstens via PHP-Skript.


Na das zeigst du mir bitte aber mal, wie du verlustfrei ein normales Bild skalierst.

Per CSS skalieren kann man aber durchaus. Du kannst dem img Tag einfach eine Breite und Höhe zuweisen. Ist von der Qualität auch ziemlich gut, aber je nach Einsatz ziemlich aufwendig und unpraktikabel. Rechnen tuts halt dann der Browser beim Seitenladen.
  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 Mi 24.06.2009 22:14
Titel

Antworten mit Zitat Zum Seitenanfang

Smooth-Graphics hat geschrieben:
benedict r. hat geschrieben:
Eine Möglichkeit, das ganze Verlustfrei zu skalieren
gibt es denke ich nicht. Höchstens via PHP-Skript.


Na das zeigst du mir bitte aber mal, wie du verlustfrei ein normales Bild skalierst.


imagemagick macht eigentlich recht gute ergebnisse. ok, nicht ganz reines php *zwinker*

und mit imagecreatetruecolor bekommt man doch eigentlich auch gute ergebnisse hin.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mi 24.06.2009 22:21
Titel

Antworten mit Zitat Zum Seitenanfang

pRiMUS hat geschrieben:
imagemagick macht eigentlich recht gute ergebnisse. ok, nicht ganz reines php *zwinker*
und mit imagecreatetruecolor bekommt man doch eigentlich auch gute ergebnisse hin.


Naja mir gings einfach um die Formulierung. Verlustfrei kann man nur Vektoren skalieren, keine Bilder (bisher).
Imagemagick hat recht wenig mit PHP zu tun. Das basiert auf C und ist nur deshalb derart mächtig. Aber man kann damit, auch mit der GD2 Library ziemlich gute Ergebnisse erzielen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Pixelpole

Dabei seit: 25.10.2004
Ort: Trier
Alter: 37
Geschlecht: Männlich
Verfasst Mi 24.06.2009 22:49
Titel

Antworten mit Zitat Zum Seitenanfang

Code:

<?php

$dir = 'images';
$pinfo = pathinfo($_GET['file']);
$quality = 100;

if ($pinfo['dirname'] == $dir) {
   $sz = getimagesize($_GET['file']);
   
   if (is_array($sz)) {
      if ((is_numeric($_GET['w'])) AND (is_numeric($_GET['h']))) {
         $img = imagecreatefromjpeg($_GET['file']);
         $dst = imagecreatetruecolor($_GET['w'], $_GET['h']);
         imagecopyresampled($dst, $img, 0, 0, 0, 0, $_GET['w'], $_GET['h'], $sz[0], $sz[1]);
         header('Content-Type: image/jpeg');
         imagejpeg($dst, null, $quality);
      }
   }
}


Code:

<img src="resize.php?file=images/pic1.jpg&w=100&h=100" />


Schnell schmutzig, grob validiert und nur für jpegs...rest kann man sich selber basteln...

Tante Edith fügt hinzu:

Smooth-Graphics hat geschrieben:
pRiMUS hat geschrieben:
imagemagick macht eigentlich recht gute ergebnisse. ok, nicht ganz reines php *zwinker*
und mit imagecreatetruecolor bekommt man doch eigentlich auch gute ergebnisse hin.


Naja mir gings einfach um die Formulierung. Verlustfrei kann man nur Vektoren skalieren, keine Bilder (bisher).
Imagemagick hat recht wenig mit PHP zu tun. Das basiert auf C und ist nur deshalb derart mächtig. Aber man kann damit, auch mit der GD2 Library ziemlich gute Ergebnisse erzielen.


Jaja, die GD Library ist ja anstatt sie in C zu programmieren in Eierkartons geschnitzt...macht sie natürlich weit aus weniger mächtig da Eierkartons im Gegensatz zu C recht Fragil sind...

Zur Info: GD hat in erster Linie haargenau wie Imagemagick erstmal garnix mit PHP zu tun sondern ist eine unabhängige Library (Sie ist übrigens auch in C geschrieben). Diese bieten jedoch beide Schnittstellen zu PHP. Nur weil PHP meistens mit GD kompiliert wird heisst es noch lange nicht das diese zum Kern von PHP gehören...

Sorry liebster Smooth aber was du hier verzapfst ist hochgradiger Bullshit. Hast du überhaupt ansatzweise eine Ahnung wovon du hier redest * Ich geb auf... *

anscheinend nicht...


Zuletzt bearbeitet von Pixelpole am Mi 24.06.2009 23:00, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 109
Geschlecht: Männlich
Verfasst Mi 24.06.2009 23:32
Titel

Antworten mit Zitat Zum Seitenanfang

Pixelpole hat geschrieben:

Jaja, die GD Library ist ja anstatt sie in C zu programmieren in Eierkartons geschnitzt...macht sie natürlich weit aus weniger mächtig da Eierkartons im Gegensatz zu C recht Fragil sind...

Zur Info: GD hat in erster Linie haargenau wie Imagemagick erstmal garnix mit PHP zu tun sondern ist eine unabhängige Library (Sie ist übrigens auch in C geschrieben). Diese bieten jedoch beide Schnittstellen zu PHP. Nur weil PHP meistens mit GD kompiliert wird heisst es noch lange nicht das diese zum Kern von PHP gehören...

Sorry liebster Smooth aber was du hier verzapfst ist hochgradiger Bullshit. Hast du überhaupt ansatzweise eine Ahnung wovon du hier redest * Ich geb auf... *

anscheinend nicht...


Lies seinen Satz nochmal... er behauptet doch nichts anderes Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen Große JPGs kleiner skalieren in weniger Schritten möglich?
[Bilder]Verlustfrei für Web speichern - Wie?
Bilder skalieren
Photoshop Bilder skalieren
Bilder exakt auf Fensterhöhe skalieren
Bilder skalieren nicht umbrechen
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.