cách dừng hình ảnh phản hồi trong twitter-bootstrap?

Question

Tôi đang sử dụng twitter bootstrap để tạo bố cục đáp ứng. Nó hoạt động như tuyệt vời.

Nó làm cho hình ảnh quá nhạy. Tôi cần một số hình ảnh chỉ cần cố định chiều rộng và chiều cao.

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

Làm cách nào để tạo?

Answer 1

Cuối cùng cũng hiệu quả.

.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

Tạo một lớp mới và đặt chiều cao tối thiểu và chiều rộng tối thiểu bằng chiều rộng và chiều cao của hình ảnh mà bạn không muốn thu nhỏ và thêm lớp đó vào những hình ảnh đó.

ví dụ:

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

Kiểm tra mã của bạn chắc chắn rằng bằng cách thiết lập chiều rộng và chiều cao hình ảnh của các thuộc tính like you did nó không làm việc và có một sự can thiệp trong phong cách để sửa chữa:

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

Hình ảnh của bạn là không được phép thay đổi kích thước với Bootstrap nếu bạn điền chính xác các thuộc tính chiều rộng và chiều cao. Các thuộc tính nội tuyến được ưu tiên hơn css.

Nếu không, bạn phải ghi đè lên phong cách img từ 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; 
} 

Tạo một selector css với thông số kỹ thuật của bạn (dòng ~ 68 phiên bản 2.0.):

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

Answer 4

Thậm chí đơn giản, bạn sẽ có thể chỉ cần thêm một lớp chung cho hình ảnh để bạn có thể sử dụng nó trên nhiều kích thước hình ảnh ...

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

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

Tôi chưa thử nó trong IE nhưng nó hoạt động trên Safari, FF và Chrome.

Answer 5

Để thêm vào câu trả lời đăng bởi @atype tôi sẽ đặt như sau:

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

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