|
resize |
|
|
Dostępne wartości: |
none | both | horizontal | vertical | inherit |
|
Wartość domyślna: |
none |
|
Przykład: |
div {resize:both;} |
|
Dziedziczenie: |
Nie |
|
Obsługa: |
Chrome, Safari |
Za pomocą opcji resize możemy pozwolić użytkownikowi strony na to, aby zmienił on rozmiar elementu, któremu sami wcześniej ustawiliśmy wysokość i szerokość.
Aby móc skorzystać z prezentowanego stylu, najpierw musimy za pomocą width i height ustawić rozmiar formatowanego elementu. Dodatkowo proponuję skorzystać z ramki i stylu overflow, aby poprawić czytelność przykładu. Dopiero do tak przygotowanego elementu strony możemy dodać styl resize zgodnie z poniższym przykładem.
DIV
{
width:100px;
height:100px;
border:1px solid;
resize:both;
overflow:auto;
}
Specyfikacja przewiduje kilka ustawień dla stylu resize:
none — nie ma możliwości zmiany rozmiaru,
both — użytkownik może zmienić rozmiar w pionie i poziomie,
horizontal — użytkownik może zmienić rozmiar w poziomie,
vertical — użytkownik może zmienić rozmiar w pionie,
inherit — przejęta zostanie wartość ustawiona dla rodzica formatowanego elementu.
Poniżej zamieszczam przykład działania omawianego stylu w odniesieniu do wszystkich dostępnych ustawień. Posiadacze przeglądarek Internet Explorer, Mozilla Firefox oraz Opera muszą zadowolić się rysunkiem 15.29, ponieważ prezentowany styl nie jest jeszcze obsługiwany przez te programy.
<<przykład>>
<div class="przyklad">
<h3>Przykład resize:none</h3>
<div style="width:100px;height:100px;border:1px solid;resize:none;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.
</div>
<h3>Przykład resize:both</h3>
<div style="width:100px;height:100px;border:1px solid;resize:both;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.
</div>
<h3>Przykład resize:horizontal</h3>
<div style="width:100px;height:100px;border:1px solid;resize:horizontal;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.
</div>
<h3>Przykład resize:vertical</h3>
<div style="width:100px;height:100px;border:1px solid;resize:vertical;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum hendrerit risus, quis viverra est cursus quis. Donec eu nisi mauris, in laoreet diam. Nulla sit amet velit a metus tincidunt ullamcorper eu ut sem. Vivamus ipsum magna, ultricies eu elementum in, volutpat et leo.
</div>
</div>
<</przykład>>
|
|
Rysunek 15.29. Przykład działania resize — aby zmienić rozmiar elementu, łapiemy za prawy dolny narożnik (wyróżniony), trzymamy wciśnięty lewy przycisk myszy i przesuwamy kursor |
