Webdesign, Tutorials und mehr - Webmasterpro.de

Bilder mit CSS skalieren?

Markus Stahmann, am Samstag den 03.09.2011 um 12:20:58

Hallo,

ich hätte mal eine Frage bzw. ein Problem. Und zwar: ist folgendes möglich?

Und zwar habe ich ein Layout, dass eine Breite von 500 Pixeln hat. Die Bilder, sollen, wenn sie größer oder gleich 500 Pixel sind auf die 500 Pixel skaliert werden. Das ist ja kein Problem, jetzt kommt allerdings das aber: Wenn die Bilder unter 500 Pixel breit sind, sollen sie automatisch auf 250px skaliert und linksbündig gefloatet werden.

Kann ich das mit reinem CSS realisieren?

Ich habe jetzt folgendes Konstrukt:

für Bilder größer oder gleich 500 Pixel:

1
2
3
4

<div class="div">
<img src="bild_>500.jpg" />
....
</div>

und für Bilder, die kleiner sind:

1
2
3

<div class="div">
<img src="bild_<500.jpg" class="float" />
</div>

Dazu dann als CSS folgenden Code:

1
2
3
4
5
6
7
8

.div, .div img {
    width: 500px;
}

.float {
    float: left;
    width: 250px !important;
}

Kann ich das auch so realisieren, dass ich beim Bild, dass kleiner als 500 Pixel ist, diese float-Klasse nicht mehr brauche und nach Möglichkeit das alles in den .div img Bereich schreiben kann und der Browser das automatisch so skaliert?

min-width und max-width sind hier ja eher nicht hilfreich. Ich vermute fast schon, dass man da mit einer Scriptsprache ran muss? Das soll aber vermieden werden.

Viele Grüße
Markus

Chris Wiese, am Samstag den 03.09.2011 um 13:25:48

Css ist keine Programmiersprache, daher kannst du keine abfragen an die Breite machen.
Du kannst entweder im Vorraus per PHP diese Abfrage machen und eine klasse anhängen oder per JS hier ein jQuery Beispiel:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Javascript
$(function(){
    $('img').each(function(){
        if($(this).width() >= 500){
            $(this).addClass('grossBild')
        }
        else{       
            $(this).addClass('float')
        }
    })
})