0

Tengo 4 imagenes en mi HTML, todas con mas de 1000px de ancho. Quiero que estas imagenes se cambien por otras más pequeñas cuando alguien ingrese con un movil. Esto no lo puedo hacer con media queries, porque yo necesito la etiqueta html IMG y NO una imagen como fondo de un contenedor. No sé si esta forma de agregar imagenes (con js) sea la correcta, porque he leido que Google prefiere que se agregue el contenido HTML directamente (y no con js), pero es la unica manera que me queda, puesto que mi diseño se basa en contenedores que se estiran segun el contenido (no tienen tamaño fijo), y para poner una imagen de fondo necesitaria establecerle un tamaño a mis contenedores, cosa que me haria renovar mucho codigo, y a estas alturas no puedo.

estoy pensando en hacer algo asi:

//css
@media (max-width : 480px) {

  img {
    display : none
  }

}

//js
if ( window.innerWidth < 481 ) {
  //jq
  $( '<img src="img/.jpg" />' ).appendTo( 'body' );
}

Lo que necesito saber es si esta es la forma de hacerlo. Si es correcto, o si no es recomendado. Gracias.

2
  • No es mejor hacer la imagen con porcentajes? En otro caso, si se puede con media queries, podrías agregar alguna imagen de tu proyecto para entender un poco mejor?
    – Patrick
    Commented el 26 mar. 2019 a las 23:30
  • te refieres a hacer pequeña una imagen de 1000 pixeles con porcentajes??????? eso se puede hacer pero no se debe, creo.....o sea seria una imagen muy pesada para una resolucion pequeña
    – natan
    Commented el 27 mar. 2019 a las 1:03

1 respuesta 1

2

Si tu prioridad no son los navegadores viejos, tienes la posibilidad de usar el atributo srcset

<img src="img-mobile.jpg" 
     srcset="img-mobileHD.jpg 2x, 
             img-tablet.jpg 768w, 
             img-tabletHD.jpg 768w 2x, 
             img-large.jpg 1200w, 
             img-largeHD.jpg 1200w 2x" />

Puedes leer mas informacion acá.

https://carlosazaustre.es/imagenes-responsive/

21
  • 1
    aparentemente quiere especificarla en el src, pero no las quiere como fondo del contenedor, ahora no deja claro si el proposito final es para cover, slideshow o carrusel. Commented el 26 mar. 2019 a las 23:46
  • 1
    pues dadas tus condiciones, no diría que tu código es incorrecto o no, mas bien diría que es la única forma de hacerlo, ya que cada opción expuesta te conlleva a un inconveniente.. Commented el 27 mar. 2019 a las 14:27
  • 1
    Bueno no se si leíste el articulo, pero el en el src especificas la imagen en tamaño móvil, es decir si el navegador no es compatible con srcset te va a cargar esa imagen de todos modos, por lo cual no debes preocuparte por blackberry y otros móviles, para IE9 es el problema, Aunque siendo honesto yo me burlaria mas del usuario que usa IE9 mas que el hecho que me diga que la pagina no se ve bien. Commented el 27 mar. 2019 a las 17:54
  • 1
    Totalmente de acuerdo con @AquilesPerez, en este punto seguir enllavado con IE9 es no solo desfasado, sino hasta un serio problema de seguridad que no vale la pena tratar (en mi opinion) creo que lo basico, es precisamente lo mas comunmente utilizado actualmente
    – IvanS95
    Commented el 27 mar. 2019 a las 18:16
  • 1
    Ummm no, me entendiste mal, internet explorer también mostrará la imagen especificada en el src, a lo que me refiero con "problema" es que al definir la imagen de tamaño móvil en el src no se verá bien ya que IE9 es una cosa que solo puedes usar desde desktop por lo cual se cargará la imagen pero si no tiene muy buena calidad se verá distorsionada Commented el 28 mar. 2019 a las 16:26

Tu Respuesta

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

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