Usar Min/Max Width y Height en CSS

Usar Min/Max Width y Height en CSS

Incluso si estás empezando con CSS, probablemente ya has utilizado las propiedades width y height.

Pero te habrás dado cuenta de que esas propiedades pueden poner restricciones innecesarias a los elementos de la página. Por lo que no estaría de más poder beneficiarnos y conocer las propiedades relacionadas al uso de los prefijos “min” y “max”.

min-width / min-height

Las propiedades min-width y min-height aceptan valores unitarios de la misma manera que las propiedades de height y width, así que no hay diferencia en la sintaxis. Se puede utilizar cualquier unidad aceptable, incluyendo píxeles, ems y porcentajes.

Estas propiedades se usa para decirle al navegador que represente un elemento con un tamaño “mínimo”.

.element {
    min-height: 200px;
    min-width: 200px;
}

Un elemento de bloque con las anteriores CSS tendría, por lo menos, unas dimensiones de 200 × 200 píxeles, incluso si el elemento estaba vacío. Sin embargo, ya que los elementos de bloque, por defecto, tienden a expandirse y adaptarse al espacio disponible, sólo el valor de min-height no tendría ningún efecto en muchos casos.

Con el siguiente ejemplo, pulsa en los botones “HTML” y “Output” hasta que veas en el código embed las dos pantallas el ejemplo que voy a comentar.

JS Bin

Para ver los efectos de min-width, agregamos un float al elemento. Al hacer esto el elemento se convierte en tipo inline en vez de block y ya no tiende a ocupar todo el espacio disponible. Si quitamos el float, el elemento ocupa todo el ancho disponible por lo que el min-width en este caso no nos haría falta.

También hay que decir que éstas propiedades no son soportadas en IE 7 y 6, como de costumbre, y hay que aplicar un hack. Es un hack un poco viejo y no muy sofisticado pero es lo que hay.

div { min-width:100px; zoom:1; *width:100px; max-height:200px; zoom:1; *height:200px;}

max-width / max-height

Al igual que las propiedades de “min”, max-width y max-height aceptan los valores unitarios. Pero esta vez, en lugar de un tamaño mínimo de un elemento, estas propiedades establecer el tamaño máximo. Aquí hay otro ejemplo simple:

.element {
    width: 15%;
    height: 15%;
    max-height: 200px;
    max-width: 200px;
}

Ten en cuenta que esta vez he especificado valores de porcentaje para la ancho y la alto, pero me he limitado el ancho y alto a unos valores de 200px. El “15%” de ancho se calcula basándose en el tamaño del elemento padre (es decir, 15% del padre). Pero incluso si el elemento primario es 5000px de ancho, el div .element no recibirá más ancho que 200 píxeles, que es el ancho máximo que hemos fijado.

Usos relevantes de min/max width y height en CSS

Es muy aconsejable el uso de éstas propiedades cuando quieres hacer un diseño “responsive” y que se adapte a los dispositivos móviles. min/max width y height junto con los media queries de CSS3 es la combinación perfecta para evitar que tenemos elementos excesivamente grandes y que no se puedan ver en móviles.

Tags de búsquedas:

max width para que sirve,max width,max-width,que quiere decir en espanol max-width,max width como usar,min-width y max-width,min-width,como usar max width,max width que es?,media query minimo altura css,significado de max-width,para que sirve min-width,ocupar el maximo heigth,Para que me sirve max y min en internet,para que me sirve max-width

Noticias relacionadas »

2 comentarios en Usar Min/Max Width y Height en CSS

  1. Dzoara
    / Responder

    Una pregunta ¿que propiedades me aconsejas para auto ajustar el contenido de ese elemento (digamos, texto) a las proporciones que adquiere?

  2. Memo
    / Responder

    Gracias, me ha servido mucho tu explicación. Y me agradó mucho esa aplicación con la que mostrabas el ejemplo.! Saludos desde Costa Rica.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Zein (1 día)
    EXELENTEE!!! MIL PUNTOS PARA TI! si me funcionó a la…
  • señales cryptowhale (2 días)
    https://t.me/SignalsWins
  • carlos hernandez (1 semana)
    Hola, hay alguna funcion k sirva para saber el correo…
  • steven (3 semanas)
    tengo un problema me sale este error cuando pongo data:…
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUFG_xDVJ-PS3cWEYAw este es el enlace me equivoque.
  • lewis rod (4 semanas)
    https://t.me/joinchat/Hs_yUBDhw2Uk7D3D835GJQ grupo de telegram latino sudamericano peru, colombia, ecuador, chile,…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
10 Video conferencias de desarrolladores Front-end que no debes perderte

En el siguiente artículo he recopilado una serie de vídeo conferencias de desarrolladores Front-end, expertos en materias tales como CSS,...

Cerrar