2

En un desarrollo web tengo una imagen para una portada para la vista Desktop, necesito que esta imagen sea diferente desde la vista Mobile debido a la resolución de dicha imagen.

El código con el cual muestro mi imagen en la portada desde la vista Desktop es el siguiente:

<div class="row" style="padding-top:51px;">
        <div class="col-xs-12 col-lg-12" style="padding-top: 20px;">
            <img src="../Imagen-Desktop.png" class="img-fluid img-responsive imagenPortada intentoProd Imagen-portada" width="1800" height="500">           
            <div class="texto-encima">
                <span class="EncabeazdoVerdeProd"> Titulo</span><br />
                <span class="EncabezadoBlancoProd">Descripcion</span>
            </div>
        </div>
    </div>

La imagen que deseo que se vea para la vista Mobile corresponde a la de la siguiente url: ../Imagen-Mobile.png.

Es posible hacer algo por medio de CSS o directamente en el HTML ?

0

1 respuesta 1

4

Pude llegar a una solución, especificando el atributo de media query dentro de un elemento HTML, <source>.

Utilizando el elemento <picture> de HTML, puedes tener varias fuentes de imagenes como <source> adentro del mismo cada fuente (source) te permite que le asignes una propiedad que se llama media, este sería como tu media query en CSS. Aquí dentro tu le puedes indicar al navegador la resolución en la que quieres que se muestre la imagen, además de las fuentes debes de tener un <img> como respaldo, esto por si alguna de tus imagenes llegaran a fallar o el navegador no puede cargar ese recurso.

body {
    margin: 0;
}

.container {
    padding-top: 51px;
}

.container-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Media queries o image source</title>
</head>
<body>
    <div class="container">
        <div class="container-2" style="padding-top: 20px;">

            <picture>
                <source srcset="desktop.jpg" media="(min-width: 1024px)">
                <source srcset="tablet.jpg" media="(min-width: 768px)">
                <source srcset="mobile.jpg" media="(min-width: 377px)">
                <img src="mobile.jpg" alt="imagen principal"> <!-- imagen principal -->
            </picture>

        </div>
        
        <div class="texto-encima">
            <span class="EncabeazdoVerdeProd">Titulo</span><br/>
            <span class="EncabezadoBlancoProd">Descripcion</span>
        </div>
    </div>
</body>
</html>

Te dejo el link de las imagenes que utilice:

Escritorio: https://i.stack.imgur.com/wTvKs.jpg

Tableta: https://i.stack.imgur.com/PkLkC.jpg

Móvil: https://i.stack.imgur.com/a0t75.jpg

2
  • Listo, modifique la respuesta aclarando que en efecto el atributo "media" viene siendo una "media query"
    – Eduardo
    el 19 abr. 2021 a las 23:31
  • Excelente respuesta, clara y concisa
    – John Doe
    el 20 abr. 2021 a las 14:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.