nicht angemeldet
Bilder verkleinern ohne sie zu verzerren
Wie der Titel schon sagt will ich Bilder in einem Layout gleichmäßig verkleinern. Diese haben alle unterschiedliche Größen, deswegen kann ich nicht dem Bild selber eine feste Größe geben da es sonst verzerrt.
Hier der Codeausschnitt dazu:
HTML
<p class="bild">
<img src="blah.jpg" alt="" class="bild" />
</p>
CSS
p.bild {
height: 280px;
width: 200px;
}
img.bild {
border: 3px solid #000000;
width: 100%;
}
Dem Bild muss ich width: 100%; geben da die Bilder sonst nicht verkleinert werden und über den Rand raus reichen.
Das ganze funktioniert auch so wie soll, das Problem ist nur das Bilder die schmäler als 200px sind verzerren.
Kennt jemand eine bessere Lösung für das Problem die auch bei kleineren Bildern klappt?
Schonmal danke im voraus. :]
-
Hallo,
nur img eine breiter _oder_ eine höhe verpassen.
<img width="10px">
Gruß
jobo
-
nur img eine breiter _oder_ eine höhe verpassen.
<img width="10px">
Das hab ich ja mit CSS gemacht (width: 100%;). Oder verstehe ich jetzt was falsch? ^^
Das Problem ist ja auch das alle Bilder unterschiedliche Größen haben und kleinere Bilder nicht vergrößert/hoch skaliert werden sollen.
-
-
Das ganze funktioniert auch so wie soll, das Problem ist nur das Bilder die schmäler als 200px sind verzerren.
Was heisst "verzerren"? Sie werden auf eine Breite von ungefähr 200px vergrößert, je nach Browser. Der eine packt den border in die 100% mit hinein, der andere packt den border außen um die 100%.
Die Höhe der Bilder wird auch vergrößert. Da du über die Höhe keine Angaben machst, wird also proportional vergrößert.
Wenn das Bild verzerrt, hast du noch Angaben, die du hier nicht gepostet hast.
Gruß, Kalle
-
Der eine packt den border in die 100% mit hinein, der andere packt den border außen um die 100%.
Von welchen absonderlichen Gegebenheiten sprichst du bitte?
-
Der eine packt den border in die 100% mit hinein, der andere packt den border außen um die 100%.
Von welchen absonderlichen Gegebenheiten sprichst du bitte?
-
Und der tritt bei dir auf?
-
Und der tritt bei dir auf?
Nöö, ich nutze den IE ja nicht. Aber wenn man schon über Fehler bei der Feinjustierung schreibt, ist das einen Hinweis wert.
-
Also mit verzerren meine ich das beim verkleinern die Proportionen nicht beibehalten werden.
Hier mal ein Beispiel:
Original Größe: 400x300
Richtig verkleinert: 200x150
Falsch Verkleinert: 200x100 (Das Bild wäre verzerrt oder wie man es nennen möchte)Das mit dem Border beim IE ist nicht schlimm. Mir gehts nur darum das die Bilder ordentlich verkleinert werden.
Bei meiner Lösung klappts, aber leider werden kleinere Bilder dadurch vergrößert und sind deswegen verschwommen.
-
Das mit dem Border beim IE ist nicht schlimm. Mir gehts nur darum das die Bilder ordentlich verkleinert werden.
Das ist verständlich.
Bei meiner Lösung klappts, aber leider werden kleinere Bilder dadurch vergrößert und sind deswegen verschwommen.
Dann sorge dafür, dass die Bilder in einer bestimmten Minimalgröße vorliegen oder übernimm das Verkleinern oder vergrößern in eine Scriptsprache.
-
-
-
-
-
-