Wordpress Bilder

Lefori

Lieutenant
Registriert
Juli 2008
Beiträge
529
Moin,

ich hab ein kleines Problem ... ich habe im WP bilder eingefügt die dort auch höhe und breite haben.

Nun habe ich noch eine css Klasse

.container img {width: 100%; height: auto;}

Nun Skaliert er die Bilder auf die Volle breite des Containers was ich aber nicht will die css klasse aber brauche wegen Responsiv.

.container {
width: 1200px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid lightgray;
border-radius: 5px;
margin: 20px auto 20px;
}

Kann jemand Helfen?

lg
Lefori
 
Was erwartest du, was er macht, wenn du ihm die Breite von 100% aufzwingst? Natürlich skaliert er da über die volle Breite des "Muttercontainers". Alternative ist: Weniger Breite angeben oder halt mit Mediaquerys arbeiten:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
 
das ist mir schon klar - problem ist nur das ich verschiede bildgrößen habe .. Mediaquerys habe ich ja drinne nur löst es halt das problem nicht so ganz
 
Und wie soll das Verhalten sein?

Du sagst uns: "Bilder skalieren auf 100%!" und zeigst uns: "width: 100%".
Es wird also geschieht also genau das, was geschehen soll - deinem CSS nach.

Wenn du uns nicht sagst, was du gerne hättest, können wir dir nicht weiterhelfen.
 
ich hätte es gerne das die bilder auf ihre maximale größe skalieren ... bild a 200px breit bild b 250px breit.
 
Code:
<img src="http://www.duden.de/_media_/full/B/Blume-201100280001.jpg" alt="Blume">

mit
Code:
img { max-width: 500px; }
kannst du ein Limit festlegen.
 
ja aber ich hab keine lust für 30 bilder immer ein unterschiedliches limit festzulegen ... dachte da gibt es was wie geh auf 100% aber nur von deiner pixal anzahl oder so ...
 
Du brauchst ja kein Limit. Ohne Limit nimmt es die Größe des Bildes an, willst du, dass keines der Bilder größer als z.B. 50% des Bildschirmes ist, machst du "max-width: 50vw".
 
Das ist leider das Problem das er die volle größer seines darüber liegenden containers annimmt.

Sprich der Container ist 1000px breit. Also ist das Bild dann auch 1000px breit obwohl es in wirklichkeit nur 250px oder so hat.
 
Wenn du "width:100%;" entfernst, dann wird das Bild in der Originalgröße angezeigt.
Anschließend fügst du zu .container img max-width: 100%; hinzu, damit zu große Bilder keinen Overflow haben.

Um die Seite responsive zu machen, sollte allerdings auch dein .container eine max-width property bekommen.
 
Zuletzt bearbeitet:
Zurück
Oben