Mam <div> z obrazem tła.Ustawianie obrazu tła divs w celu dopasowania do jego rozmiaru?
Rozmiar <div> może się zmieniać z czasem.
Czy można ustawić obraz tła Divs tak, aby pasował do rozmiaru <div>?
Powiedzmy Mam div, który jest 400x400 i obraz, który jest 1000x1000, to jest możliwe, aby zmniejszyć obraz do 400x400 a zatem dopasować rozmiar <div>?
Jeśli chcesz użyć CSS3, można to zrobić bardzo prosto za pomocą background-size, tak:
background-size: 100%;
To jest obsługiwana przez wszystkich głównych przeglądarek (w tym IE9 +). Jeśli chcesz, aby działało w IE8 i wcześniej, sprawdź odpowiedzi na this question.
jakikolwiek sposób to zrobić w css 2.1? – kfirba
Okej, zgadnij, nadszedł czas, aby przejść do CSS 3! Mam nadzieję, że IE obsługuje CSS 3 ... – kfirba
@kfirba Wierzę, że IE9 + obsługuje rozmiar tła, i jestem pewien, że są work-aroundy, aby działały w IE8 i wcześniej, jeśli tego potrzebujesz :) – lifetimes
Zastosowanie background-size w tym celu:
background-size: 100% 100%;
Więcej na:
Up-głosuj. Działa to w większości przypadków. – NINCOMPOOP
Zgadzam się :) dziękuję SO – JustJohn
Zastosowanie background-size nieruchomość do osiągnięcia tego. Powinieneś wybrać pomiędzy cover, contain i 100% - w zależności od tego, co dokładnie chcesz uzyskać.
Ustaw css do tego
img {
max-width:100%,
max-height100%
}
to jest dokładnie problem, nie chcę używać obrazu Chcę użyć Div z obrazem BG – kfirba
Ok, myślałem, że używasz obrazu wewnątrz div. Powinieneś wtedy użyć właściwości background-size. –
chcielibyście dodać rozwiązanie dla IE8 i niższych (nawet od IE5.5 myślę), które nie mogą korzystać background-size
div{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=
'/path/to/img.jpg', sizingMethod='scale');
}
wykorzystać jako może również działać jako responsywny. :
background-size: cover;
Można to osiągnąć za pomocą właściwości background-size, która jest obecnie obsługiwana przez większość przeglądarek.
Aby przeskalować obraz tła, aby zmieścić div:
background-size: contain;
Aby przeskalować obraz tła, aby pokryć całą Gr:
background-size: cover;
można użyć własności CSS3 background-size dla to.
.header .logo {
background-size: 100%;
}
Używanie _just_ CSS? –