cómo detener la respuesta de imagen en twitter-bootstrap?

Question

Estoy usando twitter bootstrap para hacer un diseño receptivo. Funciona de maravilla.

Hace que las imágenes sean muy receptivas. Necesito algunas imágenes solo necesitan ser de ancho y alto fijo.

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

¿Cómo puedo hacerlo?

Answer 1

Finalmente funcionó.

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

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

Answer 2

Cree una nueva clase y establezca la altura mínima y el ancho mínimo iguales al ancho y alto de la imagen que no desea contraer, y agregue esa clase a esas imágenes.

por ejemplo.

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

Answer 3

Compruebe el código de asegurarse de que al establecer la anchura y la altura de los atributos de imagen like you did que no está funcionando y hay una interferencia en el estilo de arreglar:

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

no se supone que su imagen para cambiar el tamaño de la Bootstrap si completa correctamente los atributos de ancho y alto. Los atributos en línea tienen precedencia sobre css.

De lo contrario, usted tiene que sobrescribir el estilo img de bootstrap.css

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\9; 
    /* 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; 
} 

Crear un selector CSS con sus especificaciones (línea ~ 68 versión 2.0.):

/* css */ 
.max-resize-50x40 { 
    max-height: 40px; 
    max-width: 50px; 
} 
.resize-50x40 { 
    height: 40px; 
    width: 50px; 
} 

Answer 4

aún más simple, Debería poder agregar una clase genérica a la imagen para que pueda usarla en múltiples tamaños de imagen ...

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

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

No lo he probado en IE, pero funciona en Safari, FF y Chrome.

Answer 5

Para añadir a la respuesta Publicado por @atype me gustaría poner de la siguiente manera:

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

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