Własność CSS resize

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.

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.

Natomiast wartość vertical własności resize spowoduje, że kursor przybierze postać pionową i rozmiar elementu będzie można zmieniać tylko w pionie.

Zastosowanie

Własność resize ma zastosowanie do elementów blokowych HTML, których własność overflow ma inną wartość niż visible.

Podsumowanie