Imágenes de fondo responsivas con relación de aspecto fijo o fluido

by Janeth Kent Date: 06-05-2021 css


¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de aspecto de las imágenes de fondo.

Los diseños responsivos permiten escalar dinámicamente el ancho de un sitio web para que se adapte tanto a los dispositivos móviles pequeños como a los ordenadores de sobremesa más grandes.

Un elemento <img> con una anchura porcentual tendrá su altura ajustada automáticamente. Su relación de aspecto sigue siendo la misma cuando se redimensiona.

Si queremos conseguir lo mismo con las imágenes de fondo, debemos averiguar cómo mantener la proporción de un elemento HTML.

 

Relación de aspecto fija

 

El truco que utilizaremos para mantener la relación de aspecto es aplicar un relleno vertical. Establecemos el relleno como un porcentaje basado en la anchura del elemento. Esta técnica se describió originalmente para los vídeos incrustados en un antiguo artículo de A List Apart, pero funciona igual de bien para cualquier elemento.

Supongamos que queremos tener una imagen de 800 por 450 píxeles. Queremos crear un elemento que mantenga la relación de aspecto de 16:9 cuando cambie su anchura. A continuación se muestra un ejemplo de código. En este ejemplo utilizamos px, pero funciona igualmente bien con unidades em. También utilizamos el elemento figure de HTML5.

 
 
<div class="column">
<figure class="fixedratio"></figure>
</div>
div.column {
max-width: 800px;
}
figure.fixedratio {
padding-top: 56.25%;  /* 450px/800px = 0.5625 */
}
 

Añadir una imagen de fondo

 

El elemento se escala y mantiene su relación de aspecto. Pero si añadimos una imagen de fondo no se escalará automáticamente junto con el elemento. Para conseguirlo añadimos background-size: cover.

Debemos asegurarnos de que la imagen es al menos tan ancha como el max-width del elemento. De esta manera el elemento nunca será más grande que la imagen. Si el elemento es más pequeño que la imagen se recortará.

<div class="column">                  
<figure class="fixedratio"></figure>                
</div>
div.column {
max-width: 800px;
}
figure.fixedratio {
padding-top: 56.25%;  /* 450px/800px = 0.5625 */
background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg);
background-size: cover;
}
 

Relación de aspecto del fluido

 

Podemos ir un paso más allá. Supongamos que tenemos una imagen de pantalla ancha que se ve muy bien en un ordenador de sobremesa. En un dispositivo móvil no queremos utilizar la misma relación de aspecto o la imagen será demasiado pequeña. Tampoco queremos utilizar exactamente la misma altura o la imagen será demasiado alta. En su lugar, la altura debería disminuir gradualmente cuando se reduzca la anchura. A esto lo llamamos relación de aspecto fluida.


El efecto puede lograrse disminuyendo el relleno porcentual y estableciendo una altura en el elemento. Supongamos que la imagen grande es de 800 por 200 píxeles y decidimos que la imagen debe tener sólo 150 píxeles de altura cuando el ancho se reduce a 300 píxeles. Ahora tenemos que calcular los atributos height y padding-top.


El diagrama anterior muestra la relación entre las dos dimensiones. La pendiente de la línea corresponde al atributo padding-top. La altura inicial corresponde al atributo height. Representa la altura que tendría el elemento si su ancho fuera cero.

Podemos implementar una relación de aspecto fluida ajustando el ejemplo con estos valores calculados.

<div class="column">
<figure class="fluidratio"></figure>
</div>
div.column {
max-width: 800px;
}
figure.fluidratio {
padding-top: 10%; 
height: 120px; 
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
background-size: cover;
}
 

Utilizar SCSS para los cálculos

 

Es posible calcular manualmente los atributos padding-top y height correctos. Por supuesto, también puedes jugar con ellos hasta que se vean bien. Pero una opción más segura es utilizar un preprocesador de CSS como SCSS para que calcule automáticamente los valores por ti. Aquí hay un ejemplo de implementación que genera el CSS mostrado arriba.

@mixin fluid-ratio($large-size, $small-size) {
$width-large: nth($large-size, 1);
$width-small: nth($small-size, 1);
$height-large: nth($large-size, 2);
$height-small: nth($small-size, 2);
$slope: ($height-large - $height-small) / ($width-large - $width-small);
$height: $height-small - $width-small * $slope;
padding-top: $slope * 100%;
height: $height;
background-size: cover;
}
figure.fluidratio {
@include fluid-ratio(800px 200px, 300px 150px);
background-image: url(http://voormedia.com/examples/amsterdam.jpg);
}

Es posible hacer que cualquier elemento HTML escale su altura proporcionalmente a su anchura. Los elementos con un atributo padding-top porcentual se escalarán en función de su anchura. Para hacer que las imágenes de fondo se escalen en los navegadores modernos puedes añadir background-size: cover.

Para hacer que la relación de aspecto cambie gradualmente al cambiar de tamaño, establece también el atributo height. Sobre la base de dos tamaños con una relación de aspecto diferente se puede calcular la altura correcta y el padding vertical.

 
by Janeth Kent Date: 06-05-2021 css visitas : 760  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.

 
 
 

Artículos relacionados

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4-…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo…

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro…

¿Cuál es la diferencia entre Flexbox y Grid?

Vamos directos al grano e intentemos responder a esta pregunta con explicaciones sencillas. Hay muchas similitudes entre Flexbox y Grid, empezando por el hecho de que se utilizan para el diseño…

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las…

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración