Ancho y alto en CSS

Anterior
Avanzar

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.

Ancho y alto en CSS

Para indicar el ancho de un elemento sim-plemente establecemos la prropiedad width y para determinar la altura establecemos la propiedad height.

Propiedad width CSS

La propiedad width nos permite establecer el ancho de cualquier elemento HTML, ya sea un contenido especifico 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 en CSS

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.

Te recomendamos leer:  Qué es CSS y Introducción a CSS

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 recomendamos leer:  Personalizando el cursor del ratón con CSS

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 limites, 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 limite del que no puede superar y como el original no supera, entonces lo mostrará tal cual.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos