• Herzlich willkommen
  • Über mich
  • Artikelübersicht
  • Gaming
    • LittleBigPlanet: Die Geschichte von Sackboy
  • E-Mail für mich
  • Gästebuch
  • Impressum
  • Oben ↑
  • Veröffentlicht am 15. Januar 2011 / 1231 Leser / Keine Kommentare
    Wordpress Icon

    [WordPress] Bilder immer in der richtigen Größe

    Probleme mit der Größe von Bildern in WordPress-Artikeln? Die Bilder sind zu breit und ragen über den Artikel hinaus? Oder werden die Bilder nicht im richtigen Seitenverhältnis angezeigt? Dann helfen euch sicher die folgenden Tipps.

    Grundsätzlich sollte euer WordPress Theme eine feste Breite für die Anzeige von Bildern in Artikeln festlegen, was verhindert, dass Bilder über die maximale Artikelbreite hinausragen. Dieser Eintrag wird im Stylesheet eures WordPress-Themes deklariert. Das sieht in etwa so aus:

    .post .body img {
    max-width:540px;
    }
    

    Ich habe in meinem Theme dafür eine maximale Breite von 540 Pixeln vorgesehen. Durch diesen Eintrag werden die Bilder in der Breite auf 540 Pixel begrenzt, egal wie breit das Bild tatsächlich ist. Die Höhe wird dabei allerdings nicht berücksichtigt, was bei größeren Bildern dazu führt, dass die Proportionen nicht mehr stimmen. Etwa so:

    Mit den Bildeinstellungen unter WordPress kann man das Bild aber ins rechte Licht rücken. WordPress bietet hier mehrere Möglichkeiten:

    Zum einen kann schon beim erstmaligen Einfügen eines Bildes die Größe festgelegt werden. Hier habt ihr die Auswahl zwischen Miniaturbild, Mittelgroß und Vollständige Größe.

    Das Bild wird hierbei immer mit dem richtigen Seitenverhältnis eingefügt. Übrigens könnt ihr die angegebenen Maximalwerte in den WordPress Einstellungen (Mediathek) selbst festlegen:

    Eine weitere Möglichkeit besteht darin, das bereits in den Artikel eingefügte Bild in der Größe prozentual zu verkleinern.

    Dies verändert sowohl die Höhe als auch die Breite des Bildes, so dass das Bild nach dem Verkleinern weiterhin proportional korrekt angezeigt wird.

    Bei dieser Möglichkeit muss allerdings gerechnet werden, damit hinterher die Breite wirklich nur maximal 540 Pixel Breite beträgt. Da ich eher zur rechenfaulen Sorte Menschen gehöre, habe ich noch eine weitere Möglichkeit:

    Ruft wieder die Bildeinstellungen auf und wechselt zum Reiter Erweiterte Bildeinstellungen. Hier gebt ihr bei Breite den entsprechenden Wert ein. Den Wert unter Höhe löscht ihr.

    Klickt auf Aktualisieren und WordPress berechnet die entsprechende Höhe eures Bildes, damit die Proportionen weiterhin stimmen.

    Und wo wir gerade beim Thema sind, noch eine Funktion, die vielleicht hilfreich sein kann. Unter den Bildeinstellungen kann eine Verlinkung auf das Originalbild gesetzt werden. Dies bewirkt, dass bei einem Klick auf das verkleinerte Bild in eurem Artikel, das Bild in Originalgröße angezeigt wird.

    Das sollte gerade bei stark verkleinerten Bildern sinnvoll sein, auf denen die Leser eures Artikels sonst nicht alles erkennen können.

    Darf ich dir noch diese Artikel ans Herz legen?
    • [WordPress] Mehrere Sidebars nutzen vom 19. Mai 2012
    • [WordPress] Mein neues Theme ‘ZWEI’ vom 9. Mai 2012
    • [WordPress] Semmelstatz wird auch weiterhin supported (Semmelstatz reloaded) vom 5. Mai 2012
    • [WordPress] Ein Gästebuch ohne Plugins reloaded vom 3. Mai 2012
    • [WordPress] ‘EINS’ – Mein erstes WordPress-Theme vom 23. April 2012
  • Twittern
  • Kategorien
  • Web
  • Tags
  • internet tutorial wordpress
  • Dein Kommentar zu diesem Artikel

    Abbrechen





    Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    «
    »

    Übersicht der Kategorien

  • Gaming
  • Grafik
  • Sicherheit
  • Sonstiges
  • Technik
  • Web
  • Webdesign
  • Übersicht der Schlagwörter

  • access
  • active directory
  • android
  • apple
  • atv
  • avatar
  • blu-ray
  • css
  • demo
  • divx
  • drm
  • dropbox
  • dsl
  • dvb
  • dyndns
  • e10
  • excel
  • facebook
  • fat32
  • fritzbox
  • fußball
  • galaxy s2
  • games
  • gif
  • gimp
  • google
  • guides
  • hannspad
  • hardware
  • hausmittel
  • hd
  • html
  • id3-tag
  • internet
  • ios
  • ipad
  • iphone
  • ipod
  • itunes
  • kennwort
  • lan
  • last.fm
  • lifestyle
  • littlebigplanet
  • marder
  • marketplace
  • medienfreigabe
  • modnation racers
  • mp3
  • musik
  • nas
  • nfl
  • ntfs
  • office
  • outlook
  • packers
  • partition
  • pdf
  • phishing
  • php
  • playstation 3
  • plugins
  • psn
  • psn id
  • remotedesktop
  • rss
  • sd
  • shopping
  • sim-lock
  • skin
  • spam
  • spielstand
  • sport
  • sql
  • steve jobs
  • tablet
  • theme
  • tutorial
  • tv
  • twonky media server
  • update
  • upnp
  • videos
  • vpn
  • wiedergabelisten
  • windows 7
  • windows media player
  • windows server
  • windows vista
  • wlan
  • word
  • wordpress
  • xbmc
  • xbox 360
  • xml
  • xoom
  • zip
    • Hallo, ich bin Olli. Herzlich willkommen auf meiner Webseite.

      Schön dich zu sehen

      Du findest hier jede Menge Informationen zu den Themen

      • WordPress und WordPress-Themes
      • Webdesign
      • Gaming
      • Grafikdesign
      • Technik
      • und vielen anderen...

      Schau dich in aller Ruhe um. Ich wünsche dir viel Spass beim Stöbern.

      Lust auf ein neues WordPress-Theme?

      WordPress-Themes

      Einige zufällig ausgewählte Artikel (nur für dich):

      • Mein Marder mag mich nicht mehr… vom 10. April 2010
      • [CSS3] Einen animierten Button erstellen vom 9. Mai 2011
      • [CSS3] Ein Timer mit “keyframes” vom 27. Mai 2011
      • [Uncharted] Die Trilogie in Film-Form vom 23. April 2012
      • Spiele mit geschützten Speicherdaten vom 16. Oktober 2009

      Die letzten Kommentare:

      • Christian hat am 18.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Christian hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Olli hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert
      • Christian hat am 17.05.2012 den Artikel [XBMC] Der ultimative Einsteiger-Guide - Teil 1 kommentiert

      Hier habe ich noch einige interessante Links für dich:

      • Meine Blu-ray-Sammlung
      • Olli on BluLife
      • Olli on Facebook
      • Olli on Google+
      • Olli on last.fm
      • Olli on lbp.me
      • Olli on twitter
      • Olli on YouTube

      Und noch was für die Schnäppchenjäger:

      • abstauben24
      • Blu-ray Preisradar für Amazon
      • Chillmo
      • DVD Tiefpreis
      • myDealZ.de
      • myliveshopping.de
      • Preisfieber
      • Preisjäger
      • Schnäppchen mit Reichweite
      • Schnäppchenfuchs
      • Schnappen4u
      • Schotendealz

      Meine persönlichen Favoriten:

      • BENM.AT
      • CSS-Tricks
      • Engadget Deutschland
      • Hifi Forum
      • ifun.de
      • Smartdroid
      • Smashing Magazine
      • Winfuture.de
    • Olli on twitter
    • Olli on Facebook
    • Olli on Google+
    • Olli on last.fm
    • Olli on YouTube
    • RSS

    Seitenanfang ↑

    Hier wird seit 937 Tagen gebloggt | 235 hilfreiche Artikel | 277 liebevolle Kommentare

    176,885 Besucher gesamt | 5 Besucher online

    Artikel RSS-Feed | Kommentar RSS-Feed | Anmelden »

    © olivergast.de ist made in Germany und wird angetrieben von Wordpress

    Theme 'ZWEI' (modified) von Oliver Gast