Cắt ảnh thành tỷ lệ khung hình trong lưới phản hồi bootstrap

Question

Vấn đề: Tôi đang cố gắng đặt hình ảnh trong responsive grid system của Bootstrap của Twitter, vì vậy chúng sẽ được chia tỷ lệ thành không gian nhất định (đối với kích thước CSS đáp ứng của cột sẽ khác nhau cho các thiết bị khác nhau). Tôi muốn chúng phù hợp với tỷ lệ khung hình - giả sử nó là hình vuông.

Standard CSS cropping technique không hoạt động nếu tôi muốn hình ảnh được thay đổi kích thước bằng Bootstrap để vừa với thiết kế lưới. Lề phủ định chỉ hoạt động để cắt phần trên cùng và dưới cùng - khi chiều cao của hình ảnh bị cắt và chiều rộng không thay đổi (ví dụ: để đặt hình ảnh dọc vào hình vuông).

Tôi đã tìm thấy rằng this technique để xác định tỷ lệ khung hình để cắt chiều rộng để không thay đổi chiều cao (đưa hình ảnh ngang vào hình vuông) hoạt động tốt với quy mô của Bootstrap.

The example (jsfiddle) hình ảnh đã cắt cho kích thước 1600x400 và 400x1600. Cho đến nay tôi đã kiểm tra nó trong Chrome và Safari hiện tại. Chỉnh sửa: Đã sửa lỗi cũng hoạt động trong Firefox.

Câu hỏi: Tôi có thể làm như thế nào theo một cách cho cả hai: cắt chiều rộng và chiều cao. Làm thế nào để làm cây trồng tùy ý trên một hình ảnh, chọn hình chữ nhật, để được đúng cách rescaled bởi Bootstrap? Làm cách nào để cắt giảm một số tỷ lệ khung hình mà không có kiến ​​thức trước về kích thước của hình ảnh?

Cảm ơn bạn vì bất kỳ ý tưởng nào!

Answer 1

Nếu giải pháp của bạn chỉ hoạt động trong trình duyệt hiện đại và thẻ img không bắt buộc, việc sử dụng hình ảnh làm nền đã giúp tôi thường xuyên trong thiết kế đáp ứng. Bạn có thể dễ dàng định vị nền ở trung tâm và làm cho chúng phù hợp với vùng chứa của chúng.

http://jsfiddle.net/willemvb/wAqSV/2/