Bild zerreist Seitenlayout
-
Hallo,
ich habe folgendes Problem: Auf meinem Blog (ThemeMin) benutze ich für den neuesten Post immer ein Artikelbild, für dass ich im CSS folgende automatische Größe eingestellt habe:
.post-row .entry-header img {
margin:0 0 10px;
width:640px;
height:260px;
}Allerdings habe ich nun das Problem, dass nun das Bild auf der Seite des betreffenden Artikels breiter als der Content ist und das Layout zerreisst. So sieht das aus: http://le-bohemien.net/2012/08/05/die-zukunft-der-demokratie/
Kann man das durch einen css-code automatisch beheben lassen bzw. anpassen?
Beste Grüße, Sebastian
Der Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
-
Versuche es mal so:
.entry-header img { height: 100%; max-width: 500px; width: 100%; }Maximale Breite auf 500 Pixel (Content-Breite) und dann Breite und Höhe auf 100%, um das Seitenverhältnis auf die 500Pixel korrekt anzupassen.
Gruß, Torsten
-
Damit passt sich das Bild auf der Artikelseite wieder der Content-Breite an, ja. Aber unabhängig davon lässt sich das Bild auf der Startseite nicht breiter gestalten bzw. anpassen?
-
Anders formuliert: es wäre ideal, wenn das Artikelbild auf der Starteite/ Artikelvorschau 640px breite und auf der Artikelseite dann 500px breite hätte…
-
Ja, sehe jetzt auch, dass das auch auf der Startseite greift.
Bei WordPress hast Du ja immer die Body-Klassen, die definieren, wo man genau ist. Je nachdem, wo du das Ganze haben möchtest, könntest Du entweder nur auf der Startseite die Größe ändern:
.home .entry-header img { margin:0 0 10px; width:640px; height:260px; }Oder nur auf den z.B. Einzelseiten, die Größe gerade biegen (und die Änderung dann entsprechend sonst überall setzen):
.single .entry-header img {
height: 100%;
max-width: 500px;
width: 100%;
}Musst Du schauen, wie das dann auf den Übersichtsseiten (Kategorien, Tags, Autoren, Archive, etc.) aussieht und was dann für dich am schlauesten ist …
Gruß, Torsten
-
Hier eine Referenz aller Body-Klassen:
http://codex.wordpress.org/Function_Reference/body_classGruß, Torsten
-
Danke.
Ich habe es selbst eben gerade auch auf diesen Weg hinbekommen:
.entry-header img {
height:80%;
max-width:640px;
width:80%;
}Oder ist z.B. aus Gründen eines effektiven Seitenaufbaus davon abzuraten?
-
Deine Lösung zerschießt die Übersichtsseiten:
http://le-bohemien.net/author/lebohemien/
http://le-bohemien.net/category/neoliberalismus/
http://le-bohemien.net/tag/okonomie/Und dein Bild auf der Startseite wird in 300 x 154 Pixel eingebunden und dann per CSS auf 640 x 260 hochskaliert, dann wird es natürlich etwas pixelig …
Gruß, Torsten
-
In der Tat. Ich habe es jetzt so versucht, aber das ist für die Übersichtsseiten auch nicht optimal…:
.home .entry-header img {
margin:0 0 10px;
width:640px;
height:260px;
}.single .entry-header img {
height: 80%;
max-width: 500px;
width: 80%;
} -
-
Das Problem ist aber auch ohne die aktuellen Änderungen vorhanden. Du bindest das Bild in 330 Pixel ein, aber die Spalte ist auch 330 Pixel. Davon musst Du aber aber noch ca. 40 Pixel Abstände abziehen. Du hast also reell für die kleine Ansicht nur 290 Pixel in der Breite. Dann sollte alles fein aussehen.
Gruß, Torsten
-
Ich meine, es auf diese Art geklöst zu haben:
.category .entry-header img {
height:100%;
max-width:290px;
width:100%;
}.tag .entry-header img {
height:100%;
max-width:290px;
width:100%;
}.author .entry-header img {
height:100%;
max-width:290px;
width:100%;
}Gruß, Sebastian
-
Da gibt es ja noch die Archivseiten (archive):
http://le-bohemien.net/2012/08/Und die Suchergebnisseite (search-results):
http://le-bohemien.net/?s=zukunft+der+demokratiedie man optimieren könnte.
Und auf der Startseite ist das Bild (wie oben schon mal erwähnt) mit 330 Pixel Größe, hochskaliert auf 640 Pixel, etwas unscharf …
Gruß, Torsten
-
„Und auf der Startseite ist das Bild (wie oben schon mal erwähnt) mit 330 Pixel Größe, hochskaliert auf 640 Pixel, etwas unscharf …“
Ich weiß, wobei mich das wundert, da ich das Bild mit einer ursprünglichen Breite von 640 Pixel hochgeladen habe…
-
Schau mal in den Quelltext. Wenn hinter der URL noch ein „?w=330&h=154“ steht, dann wird das Bild dynamisch auf diese Werte umgerechnet (nicht skaliert, sondern transformiert!)
Das Originalbild ist 640 x 428 Pixel groß.
Gruß, Torsten
-
-
Hinter der URL des Bildes.
Wenn Du das Bild einfach in den Artikel eingebettet hast, dann per Text-Reiter des Editors. Wenn Du das per Featured Image oder so umgesetzt hast, dann weiß ich es spontan und ohne Testmöglichkeit gerade leider auch nicht.
Gruß, Torsten
-
Das Bild habe ich über die Mediathek im Dashboard hochgeladen…
Und wo finde ich diesen Text-Reiter des Editors?
-
-
Hmm, also ich komm da nicht mehr weiter. Jetzt weiß ich auch was Du meinst. Der visual-editor ermöglicht nur die Bearbeitung von in Artikel eingebetten Bildern, nicht aber, wenn man es als „Artikelbild“ Feature benutzt. Doch selbst wenn ich das Bild klassisch einbette, und über den Editor die Originalgröße eingebe, erscheint das Bild auf der Startseite des Blogs nicht so, wie ich es im CSS eingegeben habe:
.home .entry-header img {
margin:0 0 10px;
width:640px;
height:260px;Wenn ich das Bild allerdings als Artikelbild eingebe, stimmt zwar die im CSS angegebe Größe, aber irgendeine Formatierung die ich nicht finde, skaliert das Bild zuvor auf eine kleinere Größe (330×154), so das es nur verpixelt dargestellt wird.
- Das Thema ‘Bild zerreist Seitenlayout’ ist für neue Antworten geschlossen.
de.WordPress.com Forums 