W specyfikacji CSS3 jest narzędzie do rozszerzania widocznego na ekranie pojemnika. Niestety, jak się wydaje, działa obecnie tylko w przeglądarce Chrome - próbowałem je zastosować z rozmaitymi prefiksami, ale udało mi się tylko w programie Google’a.
Załóżmy, że tworzę pojemnik DIV, którego tłem jest jakaś ilustracja. Styl użyty w definicji pojemnika miałby przykładową postać:
style="width: 100px; height: 50px; background-image: url('http://www.designingbeautyacademy.com/images/01_beautiful_woman.jpg')"
Mogę teraz zastosować dodatkowy styl wprowadzający rozciąganie pojemnika:
style=”resize:both; overflow: auto;”
(możliwe wartości resize to both, horizontal lub vertical)
W prawym dolnym rogu obrazka pojawia się wówczas znaczek rozszerzania pojemnika - gdy go przeciągniesz w prawo i w dół, pojemnik odsłoni zawartość. Jednak gdy nie ograniczysz szerokości i wysokości pojemnika, obrazek w tle będzie powielany. Możemy jednak zastosować dodatkowy styl ograniczający maksymalną wielkość pojemnika do zadanej wielkości, równej rozmiarom obrazka, np.:
max-width: 310px; max-height: 475px;
Ostatecznie definicja stylu może mieć postać:
style=”width: 100px; height: 50px; resize:both; overflow: auto; max-width: 310px; max-height: 475px; background-image: url('http://www.designingbeautyacademy.com/images/01_beautiful_woman.jpg')"
Utwórzmy teraz tak zdefiniowany pojemnik:
Uchwyć teraz myszką prawy dolny róg (przypominam, tylko w Chrome) i rozciągnij do maksymalnej dopuszczalnej wysokości i szerokości - zobaczysz pewną ładną panią.
Brak komentarzy:
Prześlij komentarz