Ändra storlek på egendom CSS3

Bland de många innovationer introduceras av CSS3, den nya - och ännu inte slutlig - frigörande av Cascading Style Sheets, är en egenskap särskilt intressant är ändra storlek. Tack vare den här egenskapen är det lätt att se, du kan skapa så enkla, ändra storlek element inom våra webbsidor med hjälp av en rad av CSS-koden (fram till tillkomsten av CSS3 skapa delar som krävs användning av skalbara komplexa JavaScript-funktioner).

För närvarande är denna fastighet, liksom många andra av CSS3 är inte allmänt stöds av alla webbläsare, men endast de av familjen WebKit (Safari och Chrome) och Firefox 4.

Noteras att vissa av dessa webbläsare sidelement, till exempel taggen <textarea> är skalbart som standard i både höjd och bredd.

Hantera ändra storlek

Ändra storlek på fastigheten kan ha olika värden:

• none = elementet inte ändra storlek;
• Horisontell = elementet kan ändra storlek vågrätt;
• = Vertikala element kan ändra storlek enbart vertikalt;
• både = elementet kan ändra storlek både vertikalt och horisontellt;

Här är några exempel:

 / *







 Förhindrar storleksändring av textarea







 * /







 textarea {storlek: none;}









 / *







 Jag skapar ett skalbart del vertikalt







 * /







 div.vert {storlek: vertikal;}

Hantera storleken med bundna

Användningen av fastigheten resize mycket ofta åtföljs - på grund av design - till de begränsningar som bestämmer minimi-och / eller högsta kan anta att elementet resizable. För att göra detta har vi använt följande CSS-egenskaper:

• max-width och max-höjd
• min-width och min-höjd

Låt oss se ett exempel på ett skalbart div horisontellt med fastställd högsta tillåtna bredd:

 {Div.horiz



  



 höjd: 200px;



  



 bredd: 300px;



  



 Max-width: 600px;



  



 Bakgrund: # EEEEEE;



  



 kant: 3px solid # dddddd;



  



 overflow: auto;



  



 ändra storlek: horisontellt;







 }

På denna sida kan du se en fungerande demo (naturligtvis, för att se den egendom ändra storlek på arbete som du måste använda en webbläsare som stöder det).