Veteasabertu

Propiedades max-width, max-height, min-width y min-height de CSS

13 de abril 2012
Propiedades max-width, max-height, min-width y min-height de CSS

Hoy vamos a volver a ver un poquito de hojas de estilo, que siempre viene bien. Queremos aclarar el uso de una serie de propiedades que pueden ser de gran utilidad a la hora de desarrollar un site, sobre todo si lo vamos a programar para que cargue contenido dinámicamente.

Las propiedades que vamos a ver son max-height, min-height, max-width y min-width, que corresponden a las especificaciones de CSS2 de la W3C. Se tratan de propiedades para controlar el tamaño máximo y mínimo que puede adoptar un elemento.

Propiedad max-width y max-height

Estas propiedades sirven para decirle a un elemento el ancho y alto máximo que puede alcanzar. Esto significa que si tenemos, por ejemplo, una capa que no queramos que sobrepase un alto determinado porque nos descuadra la web, podemos especificarle ese alto. Su sintaxis, atendiendo al caso, sería:

Los valores se pueden poner en unidades o porcentajes, según nos convenga.

Propiedad min-width y min-height

Si con las propiedades anteriores controlábamos el tamaño máximo de un elemento, con estas controlamos el tamaño mínimo. Nos puede servir para mantener el tamaño mínimo de una capa si el contenido es variable y de vez en cuando la capa queda demasiado pequeña.

Como en el caso anterior, los valores se pueden poner en unidades o porcentajes.

Hay que tener en cuenta que si a una capa le hemos puesto un tamaño máximo y el contenido de su interior es superior a este tamaño, dicho contenido se saldrá de la capa. Para controlar esto deberemos usar la propiedad overflow, de la que hablaremos en otro artículo.

Publicado por Jesús Tovar

Categorías: CSS

Etiquetas:

Un comentario

Pingback

  1. […] caso se me ocurrió que si los porcentajes para la propiedad height no eran viables, quizá max-height pudiera dejarme con una solución mejor que fijar el alto en píxeles. Por defecto una capa se […]

Deja un comentario

Este sitio web utiliza cookies para mejorar la experiencia de usuario, si continúas navegando estás dando tu consentimiento. Para más información pincha aquí.

ACEPTAR
Aviso de cookies