W┼éasno┼Ť─ç CSS resize

> Dodaj do ulubionych

W┼éasno┼Ť─ç CSS resize okre┼Ťla, czy u┼╝ytkownik mo┼╝e zmienia─ç rozmiar elementu przez przeci─ůgni─Öcie mysz─ů jego dolnego prawego rogu oraz w jakich kierunkach mo┼╝e to robi─ç.

Warto┼Ťci i sk┼éadnia

W┼éasno┼Ť─ç resize jako warto┼Ť─ç przyjmuje s┼éowa kluczowe: both, horizontal, none i vertical.

  • both: umo┼╝liwia zmian─Ö rozmiaru elementu w obu kierunkach, tzn. zar├│wno w pionie, jak i w poziomie.
  • horizontal: umo┼╝liwia zmian─Ö rozmiaru elementu tylko w poziomie.
  • none: wy┼é─ůcza mo┼╝liwo┼Ť─ç zmiany rozmiaru elementu.
  • vertical: umo┼╝liwia zmian─Ö rozmiaru elementu tylko w pionie.

Przykład

W poniższym przykładzie rozmiar elementu section można dowolnie zmieniać zarówno w pionie, jak i w poziomie.

<style>
section {
  border: 3px dashed lightpink;
  width: 150px;
  height: 150px;
  resize: both;
  overflow: auto;
}
</style>
<section></section>

Poni┼╝ej wida─ç efekt tego kodu. Zwr├│─ç uwag─Ö na charakterystyczn─ů ikon─Ö w prawym dolnym rogu i wygl─ůd kursora, kt├│ry oznacza, ┼╝e rozmiar elementu mo┼╝na zmienia─ç w obu kierunkach.

W┼éasno┼Ť─ç CSS resize o warto┼Ťci both

Gdyby┼Ťmy w tym przyk┼éadzie warto┼Ť─ç w┼éasno┼Ťci resize zmienili na horizontal, to kursor myszy zamieni┼éby si─Ö w poziom─ů strza┼ék─Ö, jak wida─ç na tym zrzucie ekranu.

W┼éasno┼Ť─ç CSS resize o warto┼Ťci horizontal

Natomiast warto┼Ť─ç vertical w┼éasno┼Ťci resize spowoduje, ┼╝e kursor przybierze posta─ç pionow─ů i rozmiar elementu b─Ödzie mo┼╝na zmienia─ç tylko w pionie.

W┼éasno┼Ť─ç CSS resize o warto┼Ťci vertical

Zastosowanie

W┼éasno┼Ť─ç resize ma zastosowanie do element├│w blokowych HTML, kt├│rych w┼éasno┼Ť─ç overflow ma inn─ů warto┼Ť─ç ni┼╝ visible.

Podsumowanie

ZastosowanieElementy blokowe HTML, kt├│rych w┼éasno┼Ť─ç overflow ma inn─ů warto┼Ť─ç ni┼╝ visible
Obs┼éugiwane warto┼ŤciS┼éowa kluczowe: both, horizontal, none i vertical
Warto┼Ť─ç pocz─ůtkowanone
DziedziczenieNie
SpecyfikacjaCSS Basic User Interface Module Level 4