Estoy a punto de código de un diseño sensible que probablemente contendrá tres diferentes «estados».

La peculiar es que la mayor parte del texto, por ejemplo los elementos del menú será de imágenes – no es mi idea y que nada puedo cambiar, tengo miedo.

Puesto que las imágenes pueden ser ligeramente diferentes, de distinto tamaño, para cada estado (por ejemplo, el estado más pequeño del menú flotante botones en lugar de un encabezado regular), voy a necesitar para cambiar las imágenes en vez de sólo la ampliación de la misma.

Si no fuera por que probablemente me vaya con «adaptive-images.com».

Por lo tanto, necesito algo de ayuda en una mejor práctica solución para esto.

Lo que yo podía pensar:

  • La carga de imágenes como fondos – se siente un poco sucio.
  • Insertar ambas versiones y alternar propiedad css display – muy sucio!
  • Escribir un javascript que establece todos los enlaces img – se siente un poco excesivo?

Alguien sentado en una buena solución? 🙂

Suena como un trabajo para CSS sprites? De esta manera, todos los de su «elemento de menú» imágenes » estará contenida en una imagen que se carga cuando se carga la página.
Si las imágenes son de contenido y no de la interfaz de usuario, haciendo sprites sería laborioso.

OriginalEl autor jonas | 2012-05-03

5 Comentarios

  1. 14

    Si es sólo un par de imágenes (y están optimizadas), a continuación, ocultar ellos a través de CSS no es ningún problema. Si es mucho, a continuación, echa un vistazo a Respuesta JS que va a cambiar la src sobre la marcha. Intente 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">

    Leer este artículo demasiado.

    Actualización – extra ejemplo:

    <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">
    Le echa un vistazo! Son pocos y muchos se sienta cómodo ocultarlos o haciendo un duro javascript 🙂
    Esto es genial! Gracias! Si sólo se admiten imágenes alternativas para pantallas de retina me gustaría estar en el cielo 😉
    Cool =] y en realidad hay una manera de hacerlo por device-pixel-ratio (agregado el ejemplo de arriba) también Es posible utilizar criterios personalizados. Ver Response.dpr y Response.addTest en el archivo «readme» ( github.com/ryanve/response.js ) y algunos más ejemplos generales en github.com/ryanve/response.js/wiki/… me gusta usar width o device-width como la proposición.

    OriginalEl autor ryanve

  2. 27

    Otra opción. No necesidad de secuencias de comandos, sólo 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;
      }
    }
    No va a representar la imagen completa, pero va a cargar en un dispositivo móvil, a menudo en un ancho de banda limitado.
    Me gusta esta muy acercamiento natural, gracias!
    Elegante, Estaba atascado en este caso por 1/2 hora!

    OriginalEl autor Maximiliano Catani

  3. 5

    La mayoría de los actuales navegadores están apoyando picture etiqueta.
    Así que usted puede utilizar para cambiar las imágenes dependiendo del ancho de ventana.

    <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>

    OriginalEl autor Anrijs Vītoliņš

  4. 2

    Yo soy el fan de la 3ª opción, porque no hace a cargar varias imágenes y ahorra ancho de banda.

    Porque de mobile primera diseño, en primer lugar yo pequeña de carga de 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>

    A continuación, después de documento de carga de ejecutar esta secuencia de comandos:

    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 la anchura de la pantalla es grande, entonces puedo cambiar las imágenes pequeñas a más grandes, con este script. Se ejecuta rápido en los equipos de escritorio. Y no se ejecuta en los teléfonos inteligentes.

    OriginalEl autor trante

  5. 1

    Lo que yo haría es:

    el uso de imágenes como fondo de cada li elemento

    crear un sprite con los enlaces (imágenes) en todos los tamaños:

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

    Que, con @media e.g:.

    @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 ‘sprite’ ya estará cargado en el navegador y la transición va a pasar muy suave y rápido.

    Gracias, ya pensaba de uso de css orígenes (con o sin sprites), pero ¿no se siente un poco mal? Las imágenes son en su mayoría relacionados con la IU..
    No entiendo a qué te refieres diciendo relacionados con la IU. Explique por favor. (Tengo entendido que las imágenes de los botones de navegación.)
    Esta es una muy buena idea, ¿cómo lidiar con la gran sprite de carga? Estoy tratando de velocidad de una capacidad de respuesta de sitio en el momento.
    Tenga en cuenta que las imágenes de fondo se establece el uso de «@media screen» no se muestran para la impresión.

    OriginalEl autor Roko C. Buljan

Dejar respuesta

Please enter your comment!
Please enter your name here