Thumbnail Size für Responsive Web Design

Hier können Probleme und alles andere in Deutscher Sprache gelöst werden.
Post Reply
reinhardl
Regular
Posts: 258
Joined: Wed Jun 20, 2007 8:54 am
Location: Germany

Thumbnail Size für Responsive Web Design

Post by reinhardl »

Arbeitet man mit dem WYSIWYG Editor und fürgt dort mit Hilfe von "Bilder verwalten" Bilder ein, so entsteht z.B. folgender Code.

Code: Select all

<p><a href="/s1/uploads/Reisen/Norwegen/n10.JPG" class="serendipity_image_link"><!-- s9ymdb:25 --><img width="120" height="90" src="/s1/uploads/Reisen/Norwegen/n10.serendipityThumb.JPG" class="serendipity_image_left" /></a> </p>

Hat man die Möglichkeit auf den Code so einzuwirken, dass eine prozentuale Angabe für width ohne Höhe angegen wird? Beispiel:

Code: Select all

<p><a class="serendipity_image_link" href="/s1/uploads/Reisen/Norwegen/n10.JPG"><!-- s9ymdb:25 --><img width="25%"  class="serendipity_image_left" src="/s1/uploads/Reisen/Norwegen/n10.serendipityThumb.JPG" /></a> </p>
Ziel dabei ist es, mit dem WYSIWYG Editor 4 Bilder hintereinander einzufügen und das sich diese beim verkleinern des Browsers ebenfalls verkleinern. Ist es überhaupt zulässig, nur die Breite des Bildes als prozentualen Wert anzugeben und die Höhe weg zu lassen? Ich habe ja eigentlich nur die Breite des DIV als 100%.
bernd_d
Regular
Posts: 468
Joined: Thu Jun 03, 2010 9:28 am
Contact:

Re: Thumbnail Size für Responsive Web Design

Post by bernd_d »

Ich würde die Größenangaben gleich ganz weglassen. Problematisch/Doof ist nämlich, wenn man im Backend die Vorschaubildergröße ändert, diese nicht mehr zu den Angaben im HTML passt. Je nachdem wie man die Größen ändert, sehen die Vorschaubilder dann sehr verpixelt aus :(
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Thumbnail Size für Responsive Web Design

Post by yellowled »

Die Attribute width und height nicht in Pixeln (ohne Einheit) anzugeben ist zunächst einmal komplett gegen ihren eigentlichen Zweck, zudem nicht zulässig (lies: valide). Der eigentliche Zweck ist ein schnelleres Rendering, weil der Browser ohne width/height diese Werte erst ermitteln muss.

Für RWD kann (und sollte) man diese Attribute weglassen und stattdessen per CSS max-width: 100%; und height: auto; zuweisen, aber obacht: Das kann z.B. in Google Maps und Lightboxen mitunter lustige Nebenwirkungen haben, weshalb man es vermutlich nicht unbedingt global für img vergeben will, was in s9y ja nicht das Problem ist – dort kann man es auf die von der Mediendatenbank vergebenen Klassen anwenden.

(Man will diese Technik möglichst noch mit z.B. http://adaptive-images.com/ kombinieren, da es manche Browser durchaus zum Keuchen bringt, 1600 Pixel breite Bilder auf z.B. 480 Pixel runterzuskalieren.)

Generell macht das aber nur bei Bildern Sinn, deren Dimensionen in bestimmten Auflösungen eventuell die Breite ihres Containerelementes überschreiten, was bei Thumbnails einerseits selten der Fall sein wird, andererseits aber auch schwierig in einem Template unfallfrei abzudecken ist, weil jedes Blog theoretisch eine anderen Thumbnailgröße verwenden kann, die ist schließlich einstellbar.

Ergo: Das, was Du in so einer Minigalerie kontrollieren willst (und kannst), ist die Breite des Containers, nicht die der enthaltenen Bilder. Bernds Tipp ist genau richtig: Ganz ohne width/height-Attribute einbinden.

YL
Post Reply