Saltar al contenido

Altura mínima y máxima y Ancho mínimo y máximo en CSS

Altura mínima y Altura máxima o lo que sería en CSS min-height/max-height, como podemos deducir por su nombre, indica el alto mínimo/máximo que va a adquirir un elemento. Podemos aplicarle esta propiedad a cualquier elemento imágenes, divs, textos, etc.

No hay mucho que explicar vamos a los ejemplos:

<img src="http://ejemplo.com/imagen.png" style="height: 20%; min-height: 200px" />

Esto lo que hace es aplicarle a la imagen un alto del 20%, si el porcentaje supera los 200px el alto del elemento será 200px. El atributo max-height funciona de forma inversa.
min-width/max-width de nuevo, como podemos deducir por su nombre, indica el ancho mínimo/máximo que va a adquirir un elemento.
Por ejemplo:

 
<header style="width: 50%; max-width: 500px">
    <h1>Logo</h1>
</header>

Esto lo que hace es aplicarle al elemento header un ancho del 50%, si el porcentaje supera los 500px el ancho del elemento será 500px. El atributo min-width funciona de forma inversa.