it-swarm.com.de

Ein divs-Hintergrundbild an seine Größe anpassen?

Ich habe einen <div> mit einem Hintergrundbild.

Die <div>-Größe kann sich im Laufe der Zeit ändern. 

Ist es möglich, das Divs-Hintergrundbild an die <div>-Größe anzupassen?

Nehmen wir an, ich habe ein div, das 400x400 ist, und ein Bild, das 1000x1000 ist. Ist es möglich, das Bild auf 400x400 zu verkleinern und daher die <div>-Größe anzupassen?

29
kfirba

Wenn Sie CSS3 verwenden möchten, können Sie dies ganz einfach mit background-size tun:

background-size: 100%;

Es wird von allen gängigen Browsern (einschließlich IE9 +) unterstützt. Wenn Sie möchten, dass es in IE8 und zuvor zum Laufen gebracht wird, lesen Sie die Antworten auf diese Frage .

55
lifetimes

Verwenden Sie background-size für diesen Zweck:

background-size: 100% 100%;

Mehr zu:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

23
user1386320

Verwenden Sie background-size property, um dies zu erreichen. Sie sollten zwischen cover, contain und 100% wählen - je nachdem, was Sie genau wünschen.

15
MarcinJuraszek

Dies erreichen Sie mit der Eigenschaft background-size, die jetzt von den meisten Browsern unterstützt wird.

So skalieren Sie das Hintergrundbild für das div:

background-size: contain;

So skalieren Sie das Hintergrundbild, um das gesamte div abzudecken:

background-size: cover;
6
Prajwal

Verwenden Sie dies, da es auch reaktionsschnell sein kann. :

background-size: cover;
1
Sankalp Singha

Sie können dazu die CSS3-Eigenschaft für Hintergrundgröße verwenden.

.header .logo {
background-size: 100%;
}
1
Haresh Shyara

Stellen Sie Ihre CSS auf diese

img {
    max-width:100%,
    max-height100%
}
0
miguel.gazela

Wollte eine Lösung für IE8 und darunter hinzufügen (so niedrig wie IE5.5 denke ich), die background-size nicht verwenden kann

div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
0
chiliNUT