comment arrêter de l'image réactive dans le réseau twitter bootstrap?

Je suis en utilisant twitter bootstrap pour faire responsive layout.Il fonctionne comme génial.

Il fait des images trop sensible. J'ai besoin de quelques images seulement besoin d'être fixe la largeur et la hauteur.

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40"></div>

Comment puis-je faire?

Je ne pense pas que width="50" height="40" permettra de valider, sauf si vous avez une machine de temps de retour à 1994.
et pourquoi '<img width="50" height="40"' pas de valider depuis 1994 ??
Parce que je suis assez sûr que c'est du HTML 1.x style code, qui est considérée comme obsolète. Je le recommande CSS afin de redimensionner les images. Peut-être "width=" est utilisé par les anciens e-mails de lecteurs qui ne peut pas gérer le CSS, ce qui est regrettable.
W3 specs ne considère PAS qu'il est obsolète. w3.org/TR/html5/embedded-content-0.html#the-img-element

OriginalL'auteur LoganPHP | 2012-10-04

  1. 14

    Créer une nouvelle classe et de définir la hauteur min et min-largeur égale à la largeur et la hauteur de l'image que vous ne voulez pas à se rétrécir, et d'ajouter que la classe de ces images.

    par exemple.

    /* css */
img.no-resize {
  min-height: 40px;
  min-width: 50px;
}

/* html */

<div class="span1">
  <img class="no-resize" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" width="50" height="40">
</div>
    J'espère vraiment que ce n'est pas la "bonne" façon de faire. Tout d'abord, une classe est destinée à affecter de multiples éléments. Les id sont à des modifications spécifiques, comme le dimensionnement d'une image spécifique. Mais ce qui me dérange plus: plutôt que de laisser une image seule (sans style), il est accosté par Bootstrap et puis vous êtes bizarrement le reverse-engineering de Bootstrap pour réparer les dégâts--qui ne semble pas être une solution élégante. Et n'est-ce pas oublier max-width et max-height?

    OriginalL'auteur hajpoj

  2. 4

    Vérifier votre code assurez-vous que par le réglage de la largeur de l'image et les attributs de hauteur like you did ça ne marche pas et il y a une ingérence dans le style de corrigé:

    <div class="span1">
    <img height="40" width="50" src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" />
</div>

    Votre image n'est pas censé pour redimensionner avec Bootstrap si vous avez correctement remplir les attributs width et height. Le inline attributs ont la priorité sur les css.

    Autrement, vous devez REMPLACER le img style de bootstrap.css (ligne ~68 version 2.0.) 

    img {
  /* Responsive images (ensure images don't scale beyond their parents) */
  max-width: 100%;
  /* Part 1: Set a maxium relative to the parent */
  width: auto;
  /* IE7-8 need help adjusting responsive images */
  height: auto;
  /* Part 2: Scale the height according to the width, otherwise you get stretching */
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

    Créer un sélecteur css avec votre cahier des charges :

    /* css */
.max-resize-50x40 {
    max-height: 40px;
    max-width: 50px;
}
.resize-50x40 {
    height: 40px;
    width: 50px;
}
    "Votre image n'est pas censé pour redimensionner avec Bootstrap si vous avez correctement remplir la largeur et la hauteur de" -- Fwiw, au moins dans Chrome 53.0.2785.116 m avec Bootstrap v3.3.7, si la fenêtre du navigateur est plus petit que l'image, l'image sera redimensionnée, même lorsque le height et width sont définies explicitement (pour être clair, c'est avec aucune autre CSS changements liés à l' -- plus de paramètres min-width & hauteur de la garde statique sur les petites redimensionner.)

    OriginalL'auteur Milche Patern

  3. 1

    Enfin travaillé.

    .fixed_width {
  height: 40px;
  width: 50px;
}

<div class="span1"><img src="http://i.ytimg.com/vi/uGBKzIY4mpc/0.jpg" class="fixed_width" ></div>
    oh nice. c'est plus simple que ma solution
    Êtes-vous sûr que cela a fonctionné ?

    OriginalL'auteur LoganPHP

  4. -1

    Encore plus simple, vous devriez être en mesure de simplement ajouter une classe générique à l'image de sorte que vous pouvez l'utiliser sur plusieurs tailles d'image...

    /* html */
<img src="image.jpg" alt="An image" class="fixed-size" />

/* css * /
img.fixed-size { height: auto; width: auto; }

    Je n'ai pas essayé sous IE, mais il fonctionne sur Safari, FF et Chrome.

    OriginalL'auteur atype

  5. -1

    À ajouter à la réponse posté par @atype je mettrais comme suit:

    /* html */
<img src="image.jpg" alt="An image" class="fixed-size" />

/* css * /
img.fixed-size { height: auto !important; width: auto !important; }

    OriginalL'auteur trev