En esta lección aprenderemos a establecer el ancho y alto de los elementos HTML con CSS, es una de las cosas más básicas y simples que se utiliza bastante en CSS para diseñar páginas web, pues tanto el ancho como la altura nos permiten dimensionar todos los elementos y de acuerdo a sus dimensiones posicionarla en el lugar más adecuado dentro de la estructura de la página.
Para indicar el ancho de un elemento simplemente establecemos la propiedad CSS width y para determinar la altura establecemos la propiedad height.
Propiedad width
La propiedad width nos permite establecer el ancho de cualquier elemento HTML, ya sea un contenido específico o un contenedor, de ahora en adelante podemos controlar el ancho mediante valores numéricos con sus respectivas unidades de medida.
Ejemplo de código para ancho CSS
HTML
<img class="ancho" src="gatito.png">
CSS
p.class {width: 500px;}
Si solo establecemos el ancho de un elemento, dependiendo del contenido es posible que solo se modifique el ancho, o se escale también la altura por defecto como ocurre con las imágenes.
Propiedad height
Indicar la altura de cualquier elemento HTML, ya sea un elemento tipo bloque o de línea, es tan simple como establecer la propiedad heigth y en su valor indicará la dimensión numéricamente con su respectiva unidad de medida.
Ejemplo de altura con CSS
HTML
<img class="ancho" src="gatito.png">
CSS
p.class {height: 500px;}
Al igual que con el ancho, si solo se establece la altura, dependiendo del elemento es posible que se escale el ancho o que solo se modifique la altura.
Poner ancho y alto a un elemento HTML con CSS
Ahora que conocemos las propiedades de ancho y altura en CSS, veamos un ejemplo de un elemento de imagen y un párrafo para ver los resultados obtenidos después de aplicar anchos y alturas variados.
El primer ejemplo se trata de una imagen de gatito cuya dimensiones originales son de 509x339px, mediante CSS conseguiremos establecer dos versiones de 400x200px y otra de 250x380px a partir de la misma imagen. Asume que las medidas expresadas se refieren a (ancho x alto) Veamos y notemos la diferencia de resultado:
HTML
<img class="primer" src="gatito.png"/> <img class="segundo" src="gatito.png"/>
CSS
img.primer {width: 400px; height: 200px;}
img.segundo {width: 250px; height: 380px;}
Resultado:
El segundo ejemplo se trata de un párrafo, se presenta el mismo párrafo sin aplicar CSS y la misma con ancho y altura establecida, para notar la diferencia colocaremos un color de fondo verde. Vemos la diferencia.
HTML
<p class="original" style="background-color:green;"> Párrafo para probar la propiedad de ancho y alto de CSS, sin modificación.</p> <p class="modificado" style="background-color:green;"> Párrafo para probar la propiedad de ancho y alto de CSS, con modificación (150x90px).</p>
CSS
p.modificado {width: 150px; height:90px}
Resultado
Dimensión de ancho y altura máximo y mínimo en CSS
CSS nos permite indicar las medidas mínimas y máximas que puede tener un elemento, para ese fin emplearemos las propiedades específicas para máximos y mínimos, ¡Vamos a conocerlos!
- min-width (Ancho mínimo)
- min-height (Altura mínima)
- max-width (Ancho máximo)
- max-height (Altura máxima)
Te preguntarás ¿En qué caso pueden ser útiles estas propiedades? Pues imagina que tenemos un elemento de imagen cuya altura por defecto de 100px, sin embargo queremos que como mínimo se muestre de 150px, entonces ah;i se vuelve útil.
También es posible que deseemos establecer el ancho máximo que puede ocupar un elemento, pues entonces también nos sirven estas propiedades.
Ejemplo de ancho y altura mínimos y máximos con CSS
Para el ejemplo tomaremos la misma imagen de 509x339px (ancho x alto) y mediante CSS estableceremos una altura máxima de 180px y por otro lado estableceremos un ancho mínimo de 700px, debes notar que lo que deseamos obtener es viable.
HTML
<img class="max" src="gatito.png"/> <img class="min" src="gatito.png"/>
CSS
img.max {max-height: 200px;}
img.min {min-width: 700px;}
Resultado
Cuando usar máximos y mínimos
Los máximos y mínimos son generalmente empleados para poner limites a las dimensiones de un bloque de contenido, no siempre tiene sentido emplear, ya que se limitan a establecer lo mínimo y máximo posible, si el elemento no necesita de dichos límites, entonces no se verá afectado.
Por ejemplo, si la altura original es de 339px entonces tiene sentido indicar que lo máximo sea 180px pues es menor al original, sin embargo, no tendría sentido si indicamos que la altura máxima sea de 500px, pues es mayor al original. ¿Por qué? Pues simple, el navegador interpretará la instrucción altura máxima, como un simple límite del que no puede superar y como el original no supera, entonces lo mostrará tal cual.