Índice

Redimensionar las cajas

La propiedad CSS3 resize permite redimensionar un elemento.

resize

none;

both;

horizontal;

vertical;

Comentarios

  • none: el usuario no puede redimensionar el elemento.

  • both: el usuario puede modificar la altura y la anchura del elemento.

  • horizontal: el usuario puede modificar la anchura del elemento.

  • vertical: el usuario puede modificar la altura del elemento.

Firefox 4.0+, Chrome 4.0+, Safari 4.0+, y Opera 12.1+, reconocen esta propiedad. Internet Explorer no la reconoce ni en su versión 10. Tampoco iOS Safari ni Android Browser la reconocen.

Ejemplo

La situación inicial:

images/cap21img30.png

Después de agrandar:

images/cap21img31.png

El código

<!doctype html>   
<html>   
<head>   
<title>Html5</title>    
<meta charset="utf-8">   
<style type="text/css">    
.bloque { resize:vertical;    
        overflow:hidden;    
        width:270px; height:60px;    
        border:1px solid silver;"}   
</style>   
</head>   
<body>   
<br>   
<div class="bloque">   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non 
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing 
nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas  ...