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 ...
Si desea saber más, le proponemos el siguiente libro:
couv_RIT35HTM.png
60-signet.svg
Versión impresa
20-ecran_lettre.svg
Versión online
41-logo_abonnement.svg
En ilimitado con la suscripción ENI
130-boutique.svg
En la tienda oficial de ENI
Anterior
Sombras sobre un elemento caja
Siguiente
La maquetación web