comment spécifier une autre image dans le css en fonction de si la de visites de l'utilisateur sur un ordinateur de bureau ou un navigateur mobile

Juste une question à propos de css pour les appareils mobiles,

j'ai une image qui est 1260px large sur mon site et quand j'ai regarder sur le téléphone, il destorts le site web, comme le reste du site est basé sur un 960px de mise en page.

J'ai fait ces images maintenant 960px de large pour le périphérique mobile, mais comment puis-je spécifier dans le css que si c'est une utilisation mobile mobile optimisée de l'image, au lieu d'un sur le site régulièrement.

Donc, fondamentalement, si un utilisateur se rend sur le site web sur un ordinateur de bureau, il affichera le 1260px image

et s'ils visitent le site web sur un mobile, il affichera les 960px image

toutes les idées, les gars?

OriginalL'auteur molleman | 2011-12-26

  1. 18

    Im pas sûr si vous voulez JS, j'ai décidé de répondre à votre question si vous voulez CSS3, essayez ceci:

    HTML:

    <img src="image.jpg"
     data-src-960px="image-960px.jpg"
     data-src-1260px="image-1260px.jpg"
     alt="">

    CSS:

     @media (min-device-width:320px) {
        img[data-src-960px] {
            content: attr(data-src-960px, url);
        }
    }

    @media (min-device-width:960px) {
        img[data-src-1260px] {
            content: attr(data-src-1260px, url);
        }
    }

    la version jQuery:

     $(document).ready(function() {

 function imageresize() {
 var contentwidth = $('#content').width();
 if ((contentwidth) < '960'){
 $('.imageclass').attr('src','image-960px.jpg');
 } else {
 $('.imageclass').attr('src','image-1260px.jpg');
 }
 }

 imageresize();//Activates when document first loads    

 $(window).bind("resize", function(){
 imageresize();
 });

 });
    pourrais-je avoir le javascript aussi s'il vous plaît, afin que je puisse voir à la fois les moyens merci
    Avec jQuery: $(document).ready(function() { function imageresize() { var contentwidth = $('#content').width(); if ((contentwidth) < '960'){ $('.imageclass').attr('src','960-image.jpg'); } else { $('.imageclass').attr('src','1260-image.jpg'); } } imageresize();//Activates when document first loads     $(window).bind("resize", function(){//Resizes image when browser resized imageresize(); }); });
    Euh... ce commentaire mise en page ignoré ces espaces, permettez-moi de reposter cette réponse pour agencement
    désolé l'image im en utilisant une image d'arrière-plan définie dans le css sur un élément div, donc je ne peux pas appliquer de données-src-960px="image-960px.jpg".....que dois-je faire?
    Il semble que le CSS3 est conçu pour les plus récents et mis à jour les navigateurs modernes, il ne fonctionne pas pour les anciens navigateurs qui supportent le data-src... Pouvez-vous essayer la version jQuery?

    OriginalL'auteur Ivan

  2. 4

    Inspiré par Ivan réponse, voici une version jQuery qui utilise les media queries pour être aussi proche que possible de son CSS3 solution (qui ne fonctionne pas pour moi dans Firefox 31 et Safari 7):

    $(document).ready(function() {
    var mqsmall = "(min-device-width:320px)";
    var mqbig   = "(min-device-width:960px)";
    function imageresize() {
        if(window.matchMedia(mqbig).matches) {
            $('img[data-src-1260px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-1260px'));
            });
        }
        else if(window.matchMedia(mqsmall).matches) {
            $('img[data-src-960px]').each(function () {
                $(this).attr('src',$(this).attr('data-src-960px'));
            });
        }
    }

    imageresize();

    $(window).bind("resize", function() {
        imageresize();
    });
});
    Juste pour être clair, je voudrais tapez le chemin d'accès/nom de l'image, dans le dossier " src " ou...?
    L'image serait quelque chose comme <img src="basesize.png" data-src-960px="image-for-960px.png">.

    OriginalL'auteur mrueg

  3. 2

    Vous êtes à la recherche pour les requêtes de média. Vous pouvez écrire des styles conditionnels sur la largeur:

    http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

    http://www.w3.org/TR/css3-mediaqueries/

    OriginalL'auteur Calvin Froedge