Alto, ancho y ancho máximo de CSS

Tabla de contenido

    Mostrar tabla de contenidos

Las propiedades CSS height y width se utilizan para establecer el Alto y ancho de un elemento.

La propiedad CSS max-width se utiliza para establecer el ancho máximo de un elemento.

This element has a height of 50 pixels and a width of 100%.

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>

CSS Configuración de alto y ancho

Las propiedades height y width se utilizan para establecer el Alto y ancho de un elemento.

Las propiedades de alto y ancho no incluyen relleno, bordes ni márgenes. Establece la altura/ancho del área dentro del relleno, borde y margen de el elemento.

Valores de alto y ancho de CSS

Las propiedades alto y ancho puede tener los siguientes valores:

  • auto: esto es el valor predeterminado. El navegador calcula la altura y el ancho

  • longitud: define la altura/ancho en px, cm, etc.

  • %: define la altura/ancho en porcentaje de el bloque contenedor

  • inicial: establece la altura/ancho en su valor por defecto

  • heredar - La altura/ancho será heredado de su valor padre

Ejemplos de altura y ancho de CSS

This element has a height of 200 pixels and a width of 50%

Ejemplo

Establezca la altura y el ancho de un elemento <div>:

div {
  height: 
200px;
  width: 50%;
  background-color: powderblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>
This element has a height of 100 pixels and a width of 500 pixels.

Ejemplo

Establezca la altura y el ancho de otro elemento <div>:

div {
  
height: 
100px;
  width: 500px;
  background-color: powderblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px.</div>

</body>
</html>

Nota: Recuerde que las propiedades height y width no incluyen relleno, bordes , o márgenes! Establecen la altura/ancho del área dentro del relleno, borde, y margen del elemento!

Configuración del ancho máximo

La propiedad max-width se utiliza para establecer el ancho máximo de un elemento.

El ancho máximo se puede especificar en valores de longitud, como px, cm, etc., o en porcentaje (%) del bloque que contiene, o establecerlo en ninguno (esto es por defecto. Significa que no hay ancho máximo).

El problema con el <div> anterior ocurre cuando la ventana del navegador es más pequeña que el ancho de el elemento (500px). Luego, el navegador agrega una barra de desplazamiento horizontal a la página.

Usar max-width en su lugar, en esta situación, mejorará el manejo de ventanas pequeñas por parte del navegador.

Consejo: Arrastre la ventana del navegador a un ancho inferior a 500 px para ver la diferencia entre los dos divs!

This element has a height of 100 pixels and a max-width of 500 pixels.

Nota: Si por algún motivo utiliza ambos propiedad ancho y la propiedad max-width en el mismo elemento y el valor de la La propiedad ancho es mayor que el propiedad ancho máximo; el Se utilizará la propiedad max-width (y el Se ignorará la propiedad width).

Ejemplo

Este elemento <div> tiene una altura de 100 píxeles y un ancho máximo de 500 píxeles:

div {
    max-width: 500px;
  
height: 
100px;
  background-color: powderblue;
}

Pruébelo usted mismo →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

Pruébelo usted mismo: ejemplos

Establecer la altura y el ancho de los elementos.

<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}

img.two {
  height: 200px;
  width: 200px;
}

div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of elements</h2>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>

<p>The height and width of this div element is 300px:</p>
<div class="three"></div>

</body>
</html>

Este ejemplo demuestra cómo establecer la altura y el ancho de diferentes elementos.

Establecer la altura y el ancho de una imagen usando el porcentaje

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>

<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">

</body>
</html>

Este ejemplo demuestra cómo establecer la altura y el ancho de una imagen usando un valor porcentual.

Establecer el ancho mínimo y máximo de un elemento

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>

Este ejemplo demuestra cómo establecer un ancho mínimo y un ancho máximo de un elemento utilizando un valor de píxel.

Establecer la altura mínima y máxima de un elemento

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>

Este ejemplo demuestra cómo establecer una altura mínima y una altura máxima de un elemento utilizando un valor de píxel.

Todas las propiedades de dimensión CSS

height

Establece la altura de un elemento.

max-height

Establece la altura máxima de un elemento.

max-width

Establece el ancho máximo de un elemento.

min-height

Establece la altura mínima de un elemento.

min-width

Establece el ancho mínimo de un elemento.

width

Establece el ancho de un elemento.