Ich möchte eine Website gestalten.
Ich habe einige Bilder mit unterschiedlichen w*h.
Zum Beispiel haben wir viele Bilder bei 800*600 oder 1024*768 oder etwas anderem.
Auf unserer Website haben wir einige eingeschränkte Frames wie 270 * 160 oder 512 * 900. Wir möchten die Hauptbilder in eingeschränkter Rahmengröße skalieren oder skalieren.
Wie können wir dies mit Photoshop oder anderen Webdesign-Tools tun, um die Größe von Bildern zu ändern, ohne die Hauptbilder zu dehnen, zu zerstören oder zuzuschneiden, damit sie richtig in die Rahmengröße passen, ?
In einfachen Worten ... Sie können nicht .
Wenn Sie das Gesamtseitenverhältnis eines Bildes ändern möchten, müssen Sie es zuschneiden, dehnen, squishen oder maskieren (das Maskieren kann im Web möglich sein, obwohl es im Wesentlichen zu einem Zuschneiden führt). Das sind Ihre einzigen Möglichkeiten.
Von wie vielen Bildern reden wir? Wenn es eine Handvoll ist, können Sie dies manuell tun. Ermitteln Sie Ihre Rahmengröße, erstellen Sie eine neue leere Datei in dieser Größe und öffnen Sie dann Ihr Quellbild. Reduzieren Sie die Größe Ihres Bildes, sodass entweder die Höhe mit Ihrem Rahmen übereinstimmt oder die Breite (je nachdem, welche kleiner ist), und schneiden Sie das Bild dann aus und fügen Sie es in Ihr leeres „Rahmen“-Bild ein. Sie können das Bild dann verschieben, um herauszufinden, wo es zugeschnitten werden soll, und es dann als Bild mit „beschnittenem Rahmen“ speichern. Wiederholen.
Wenn wir über Hunderte von Fotos sprechen, möchten Sie wahrscheinlich eine Software verwenden, um dies zu automatisieren.
Alternativ können Sie dies auch rein mit CSS tun, wenn die Bilder in Bezug auf die Downloadgeschwindigkeit nicht verrückt groß sind. Verwenden Sie die gleiche Logik wie oben, wo Sie Ihre divGröße auf die gewünschte Rahmengröße haben, dann das Bild als Hintergrundbild. Sie benötigen ein wenig JS, um festzustellen, ob das Bild basierend auf Breite und Höhe skaliert werden soll.
Wenn Sie das Bild in Photoshop ziehen, klicken Sie mit der rechten Maustaste auf die Ebene und Sie finden "In intelligentes Objekt konvertieren". Damit wird Ihr Bild nicht gestreckt oder wenn Sie die Größe ändern, wird es auch nicht verpixelt.
Raffael