Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Zmiana rozmiaru wymiarowanego elementu

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15749165