¿Cambiar img src en diseños receptivos?

Estoy a punto de codificar un diseño receptivo que probablemente contendrá tres "estados" diferentes.¿Cambiar img src en diseños receptivos?

La parte estrafalaria es que gran parte del texto, por ejemplo, los elementos del menú serán imágenes, no es mi idea y eso es todo lo que puedo cambiar, me temo.

Dado que las imágenes diferirán ligeramente, aparte del tamaño, para cada estado (por ejemplo, en el estado más pequeño el menú se convierte en botones flotantes en lugar de un encabezado normal), tendré que cambiar las imágenes en lugar de escalar las mismas .

Si no fuera por eso, probablemente vaya con "adaptive-images.com".

Por lo tanto, necesito información sobre una solución de mejores prácticas para esto.

lo que podía pensar:

Cargando las imágenes como fondos - se siente un poco sucia.
Inserte ambas versiones y active la propiedad css display - ¡muy sucio!
Escribir un javascript que establezca todos los enlaces img - ¿Se siente un poco exagerado?

¿Alguien sentado en una buena solución? :)

Fuente

2012-05-03 jonas

Suena como un trabajo para [sprites CSS] (http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/)? De esta manera, todas sus "imágenes de elementos de menú" estarán contenidas en una imagen que se carga cuando se carga la página. – thirtydot

Si las imágenes son contenido y no UI, hacer sprites sería laborioso. –

Si solo se trata de unas pocas imágenes (y están optimizadas), ocultarlas a través de CSS no es un problema. Si es mucho, eche un vistazo a Response JS que cambiará el src sobre la marcha para usted. Pruebe esto:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
]}'> 

<img src="small.png" data-min-width-481="medium.png" alt="example">

Lea this article too.

actualización - ejemplo adicional:

<body data-responsejs='{ "create": [ 
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] } 
    , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] } 
]}'> 

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

Fuente

2012-05-04 07:03:36 ryanve

¡Lo verificará! Son pocos para sentirse cómodos ocultándolos o haciendo un javascript codificado :) – jonas

¡Esto es genial! ¡Gracias! Si solo admite imágenes alternativas para retina, estaré en el cielo;) – jonas

@jonas Cool =] y de hecho hay una manera de hacerlo por 'device-pixel-ratio' (ejemplo agregado arriba) También es posible usar criterios personalizados Consulte 'Response.dpr' y' Response.addTest' en el archivo léame (https://github.com/ryanve/response.js) y algunos ejemplos más generales en https://github.com/ryanve/response.js/ wiki/how-to-create-breakpoint-sets Me gusta usar 'width' o' device-width' como prop. – ryanve

Lo que yo haría es:
imágenes utilizar como fondo de cada elemento li
crear un sprite con los enlaces (imágenes) en todos los tamaños:

___ ___ ___ ___ 
__ __ __ __ 
_ _ _ _

Than, utilizando @media p.ej:.

@media only screen and (max-width : 480px) { 
/* here I would make my li smaller */ 
/* here I would just change the li background position*/ 
}

Las imágenes de sprite '' se ha cargado en el navegador y la transición ocurrirá realmente suave y rápido.

Fuente

2012-05-03 21:28:40

Gracias, ya pensé en usar fondos CSS (con o sin sprites), pero ¿no te parece un poco incorrecto? Las imágenes son en su mayoría relacionadas con la interfaz de usuario. – jonas

No entiendo lo que quieres decir con lo relacionado con la interfaz de usuario. Explique por favor. (Entendí que las imágenes serán botones de navegación.) –

Esta es una muy buena idea, ¿cómo lidiar con la gran carga de sprites? Estoy tratando de acelerar un sitio receptivo en este momento. – SpaceBeers

yo soy el fan de la tercera opción, ya que no tiene que cargar varias imágenes y ahorra ancho de banda.

Debido móvil de primer diseño, primero me carga pequeñas imágenes como esta:

<div id="mydiv"> 
    <img src="myphoto1_normal.jpeg" width="24" height="24" alt="myphoto1"/> 
    <img src="myphoto2_normal.jpeg" width="24" height="24" alt="myphoto2"/> 
</div>

Luego, después de la carga de documentos que ejecutar este script:

function resizeImages() { 
    var width = window.innerWidth || document.documentElement.clientWidth; 
    $("#mydiv img").each(function() { 
     var oldSrc = $(this).attr('src'); 
     if (width >= 768) { 
      var newSrc = oldSrc.replace('_normal.','_bigger.'); 
      var newWidth = 100; var newHeight = 100; 
     } else if (width >= 480) { 
      var newSrc = oldSrc.replace('_normal.','_big.'); 
      var newWidth = 50; var newHeight = 50; 
     } 
     $(this).attr('src',newSrc); 
     $(this).attr('width',newWidth); 
     $(this).attr('height',newHeight); 
    }); 
}

Si el ancho de la pantalla es grande, entonces puedo cambiar imágenes pequeñas a las más grandes con esta secuencia de comandos. Funciona rápido en computadoras de escritorio. Y no se ejecuta en teléfonos inteligentes.

Fuente

2013-04-27 14:57:02 trante

Otra opción. No necesita scripts, solo CSS.

HTML

<div id="mydiv"> 
    <img src="picture.png" class="image_full"> 
    <img src="picture_mobile.png" class="image_mobile"> 
</div>

CSS

.image_full{ 
    display:block; 
    } 

.image_mobile{ 
    display:none; 
} 

@media (max-width: 640px) and (min-width: 320px){ 
    .image_full{ 
    display:none; 
    } 

    .image_mobile{ 
    display:block; 
    } 
}

Fuente

2015-03-12 17:30:28

No procesará la imagen completa, pero aún la cargará en un dispositivo móvil, a menudo en un ancho de banda limitado. –

Me gusta este enfoque muy natural, ¡gracias! – mimic

Elegante, estaba atrapado en este durante 1/2 hora! –

La mayoría de los navegadores de hoy are supportingpicture etiqueta. Para que pueda usarlo para cambiar las imágenes dependiendo del ancho de la ventana gráfica.

<picture> 
    <source media="(min-width: 1200px)" srcset="/img/desktop-size.png"> 
    <source media="(min-width: 768px)" srcset="/img/medium-size.png"> 
    <img src="/img/mobile-size.png"/> 
</picture>

Fuente

2017-10-29 15:47:12

¿Cambiar img src en diseños receptivos?

Respuesta

Cuestiones relacionadas