Css, expandir las imágenes a todo el ancho de la pantalla

En varias páginas de mi sitio web trato de que las imágenes se expandan al máximo para aprovechar el ancho limitado de las pantallas de los dispositivos móviles y se pueda visibilizar mejor su contenido.
No hablo de imágenes de fondo que se usan en el encabezado y se amplían usando la propiedad de CSS "background-size", esto solo puede aplicarse a una imagen en la página y generalmente es usado en versiones para equipos de escritorio.
Lee más información sobre este método.
Hablo de ampliar varias imágenes, que se ajusten al ancho total del dispositivo y se puedan desplazar verticalmente de forma tradicional, sin que pierdan la proporción o relación de aspecto.
Para eso uso una regla CSS, que comparto a continuación.

Expandir las imágenes al todo el ancho de las pantallas en dispositivos móviles

Para ampliar las imágenes al 100% de la pantalla en dispositivos móviles uso las siguientes reglas CSS.
La clase "wfull" debe ser asignada a todas las imágenes en la página que se desean expandir.
La primera regla es para dispositivos con el ancho de la pantalla menor que 768 pixeles, como tabletas.
La segunda regla es para dispositivos con el ancho de la pantalla igual o menor que 540 pixeles.
La tercera regla es para móviles con el ancho de la pantalla igual o menor que 360 pixeles.

@media screen and (max-width: 769px) {
 .wfull {
     max-width: 100vw;
     width: 100vw;
     position: relative;
     right: 22.5px;
     display: flex;
 }
}
@media screen and (max-width: 541px) {
 .wfull {
     right: 18px;
 }
}
@media screen and (max-width: 361px) {
 .wfull {
     right: 16px;
 }
}

Ejemplo de una imagen expandida a todo el ancho de la pantalla del móvil con CSS.

Solo es necesario modificar el valor de la propiedad "right" en pixeles.
Este depende del valor del padding y margin aplicado en cada plantilla.
Los valores de las propiedades "max-width" (ancho máximo) y "width" están en "vw".

¿Qué significa el valor VW en CSS?

VW significa Viewport Width (ancho del dispositivo).
Funciona como una unidad de porcentaje. Por ejemplo: 100% quiere decir todo el ancho visible de la pantalla.

Expandir las imágenes a todo el ancho del contenedor de la página en escritorio

También se puede hacer algo similar para la versión de escritorio de una página, haciendo que la imagen sobresalga del contenedor que engloba el resto del contenido.
Un ejemplo es la imagen de encabezado de esta misma página.
La regla usada CSS es la siguiente. De forma similar La clase "wfull" es la asignada a dicha imagen.

.wfull {
  max-width: 780px;
  width: 780px;
  position: relative;
  right: 21px;
  display: flex;
}

La diferencia es que los valores de las propiedades "max-width" y "width" se establecen en pixeles, no en "vw" como en el método empleado para dispositivos portables.
El valor de ambas propiedades depende del ancho de la pagina en pixeles, mas los valores del padding y margin de la plantilla usada.
Por ejemplo, el valor del ancho de esta pagina es de 768 pixeles.

Regla CSS para usar una imagen de fondo en una página

Para algunos lectores que me han preguntado, agrego al artículo como establecer una imagen estática de fondo con CSS.
Esto como decía mas arriba es muy usado en las versiones de escritorio, para usar una imagen que se expanda a todo el espacio del monitor, incluso a pantallas mas grandes como la de un televisor.
Es usado en páginas comerciales y para negocios.
Para eso solo es necesario agregar la siguiente regla de ejemplo al CSS, especificando la ruta a la imagen que se usará como fondo.

body {
   background: url(imagenes/fondo.png) no-repeat center center fixed;
   background-size: cover;
   -moz-background-size: cover;
   -webkit-background-size: cover;
   -o-background-size: cover;
}

Lograr que las imágenes de fondo sean compatibles con iPhone e iPad

Para asegurar compatibilidad de esta función con iPad y iPhone debemos de usar una regla diferente.

body:after{
   content:"";
   position:fixed; 
   top:0;
   height:100vh;
   left:0;
   right:0;
   z-index:-1;
   background: url(fondo-jijira.jpg) center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;	 
   }

Este código es usado en esta misma página y se puede aplicar de forma dinámica usando el siguiente botón, el CSS es inyectado con JavaScript.
Agregar CSS
Restaurar
Cómo se puede comprobar la imagen de fondo se adapta automáticamente a cualquier pantalla y se mantiene estática en la medida que nos desplazamos hacia arriba o abajo por el contenido de la página.

Artículo etiquetado como: #css

Páginas relacionadas

Inicio | Mapa del sitio | Buscar | Sobre mí

Norfi Carrodeguas, Copyright © 2023 NorfiPC

SUBIR