Masquer l'image En responsive web design mise en page.

Je veux cacher une image uniquement lorsqu'il est vu à partir d'un mobile ou d'une tablette.

Comment puis-je faire cela?

Êtes-vous à l'aide de bootstrap? cochez cette page getbootstrap.com/css/#responsive-utilities

OriginalL'auteur Vivek Nath R | 2012-09-15

  1. 7

    À l'aide de 'display: none' sur les dhceu sera toujours télécharger l'image qui n'est pas recommandé car c'est une requête http disparu des déchets (vous pouvez le voir en regardant l'onglet réseau dans votre navigateur, l'inspecteur[clic droit, inspecter l'élément en Chrome]. juste actualiser la page et vous verrez de chaque actif en cours de téléchargement et le temps qu'il faut pour le télécharger.).

    Plutôt que vous pourriez faire de ces images que vous ne souhaitez pas charger en arrière-plan des images sur les divs.

    Alors tout ce que vous devez faire est de:

    @media (max-width: x) {
    .rwd-img {
        background-image: none;
        }

    Bien sûr, vous devez définir la hauteur et la largeur de votre image pour une div dans le CSS, mais c'est mieux que de sacrifier l'expérience utilisateur. 🙂

    Liens d'intérêt:

    http://css-tricks.com/on-responsive-images/
    http://mattstow.com/responsive-and-retina-content-images-redux.html

    OriginalL'auteur carpenumidium

  2. 4

    Vous aurez envie d'utiliser les media queries, e.g:

    @media (max-width: 979px) {
   .img { 
      display: none;
   }
}

    Vous devriez également regarder dans un cadre comme Bootstrap qui fournit sensible classes utilitaires.

    Je pense que ce code va bloquer toutes les images. En fait, je veux cacher une image en particulier.
    Non, il va se cacher n'importe quelle image avec le "img" de la classe

    OriginalL'auteur devdigital

  3. 2

    À l'aide de Feuilles de Style en Cascade avec une requête de média, vous pouvez masquer l'image lorsque les téléspectateurs de la résolution d'écran est inférieure à une valeur donnée, comme dans cet exemple, la largeur de l'écran est inférieure à 640 pixels.

    @media screen and (max-width: 640px) {

    .my-image {
        display: none;
    }

}

    OriginalL'auteur stefanglase