Ich habe eine <div> mit einem Hintergrundbild.Ein Divs-Hintergrundbild auf seine Größe einstellen?
Die Größe <div> kann sich im Laufe der Zeit ändern.
Ist es möglich, das Divs-Hintergrundbild an die Größe <div> anzupassen?
Lets sagen, dass ich ein div habe, die 400x400 und ein Bild, das 1000x1000 ist, ist es möglich, das Bild zu 400x400 und deshalb passen die <div> Größe zu schrumpfen?
Wenn Sie CSS3 verwenden möchten, können Sie es tun ziemlich einfach mit background-size, etwa so:
background-size: 100%;
Es wird von allen gängigen Browsern unterstützt (einschließlich IE9 +). Wenn Sie möchten, dass es in IE8 und vorher funktioniert, lesen Sie die Antworten auf this question.
jeder Weg, es in CSS 2.1 zu tun? – kfirba
Okay, denke, es ist der richtige Zeitpunkt, um zu CSS 3 zu wechseln! Ich hoffe, IE unterstützt CSS 3 ... – kfirba
@kfirba Ich glaube, IE9 + unterstützt Hintergrund-Größe, und ich bin sicher, es gibt Work-Arounds zu arbeiten in IE8 und vorher, wenn Sie es brauchen :) – lifetimes
Verwenden background-size zu diesem Zweck:
background-size: 100% 100%;
Mehr auf:
Up-Stimme. Dies funktioniert in den meisten Fällen. – NINCOMPOOP
Ich stimme zu :) danke SO – JustJohn
Verwenden background-size Eigenschaft, das zu erreichen. Sie sollten wählen zwischen cover, contain und 100% - je nachdem, was genau Sie bekommen möchten.
Stellen Sie Ihre CSS diese
img {
max-width:100%,
max-height100%
}
das ist genau das Problem, ich möchte kein Bild verwenden Ich möchte eine Div mit BG Bild – kfirba
Ok, ich dachte, Sie verwenden ein Bild in der div. Sie sollten dann die background-size-Eigenschaft verwenden. –
wollten eine Lösung für IE8 und unten hinzufügen (so niedrig wie IE5.5 glaube ich), die nicht als background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
Verwenden Sie diese verwenden können es kann auch als reaktionsschnell agieren. :
background-size: cover;
Sie können dies mit der Hintergrundgröße-Eigenschaft erreichen, die jetzt von den meisten Browsern unterstützt wird.
das Hintergrundbild zu skalieren innerhalb des div zu passen:
background-size: contain;
das Hintergrundbild skalieren die ganze div abdecken:
background-size: cover;
Sie die CSS3 Hintergrund-size Eigenschaft könnte für Dies.
.header .logo {
background-size: 100%;
}
Verwendung von _just_ CSS? –