dropZone cross-platform thumbnail hệ

Question

Tôi đang sử dụng dropZone để tải ảnh lên và đã nhận thấy 2 vấn đề:

1. hệ Thumbnail cho hình ảnh cùng một thất bại trong một số trình duyệt ví dụ đối với hình ảnh được đính kèm, hình thu nhỏ được tạo đúng cách trong chrome, trống trong safari và trong firefox chỉ là một nền màu xám.
2. Trong safari, hầu hết các hình thu nhỏ được tạo đúng cách, nhưng không phải cho một số kích thước/tỷ lệ cỡ ảnh. ví dụ. một lần nữa hình ảnh đính kèm, nếu streched theo chiều ngang, safari sẽ tạo ra các hình thu nhỏ, nếu không thì không.

Cập nhật

bây giờ tôi đã chứng minh rằng điều này đang được gây ra bởi sự param "null" cho chiều rộng thu nhỏ. Đặt giá trị đó thành giá trị sẽ khắc phục sự cố trong tất cả các trình duyệt. Lý tưởng nhất, tôi muốn hiển thị một hình thu nhỏ ở tỷ lệ khung hình ban đầu của nó, nhưng có vẻ như điều này là không cho một số kích cỡ/trình duyệt như mô tả ở trên.

Có cách khắc phục hoặc giải pháp nào khác để tôi có thể hiển thị hình thu nhỏ ở tỷ lệ khung hình gốc không?

dropZone mã init:

var photosDropzone = new Dropzone("#photosContainer", { url: "{% url 'ajax_photo_upload_view' %}", maxFilesize: 4, 
    acceptedFiles: 'image/*', addRemoveLinks: true, 
dictRemoveFile:'Delete', thumbnailHeight:160, thumbnailWidth:null, }); 

Answer 1

Bạn có thể sẽ phải tính toán chiều rộng mới dựa trên tỉ lệ của bản gốc và kích cỡ.

Xem này khác Stack Overflow Q/A cho một ý tưởng về làm thế nào để làm điều này:

Algorithm to resize image and maintain aspect ratio to fit iPhone

Answer 2

Hãy thử sử dụng sau CSS

.dropzone .dz-default.dz-message { 
    opacity: 1; 
    -ms-filter: none; 
    -webkit-filter: none; 
    filter: none; 
    -webkit-transition: opacity 0.3s ease-in-out; 
    transition: opacity 0.3s ease-in-out; 
    background: #fff; 
    background-repeat: no-repeat; 
    background-position: 0 0; 
    position: absolute; 
    width: 428px; 
    height: 123px; 
    margin-left: -214px; 
    margin-top: -61.5px; 
    top: 50%; 
    left: 50%; 
    font-size: 20px; 
} 
.dropzone .dz-preview{ 
    margin: 0 10px !important; 
} 

.thumbnail { 
    height: 150px; 
    width: 150px; 
    margin: 10px; 

} 

.thumbnail img{ 
    min-height: 100px; 
    min-width: 100px; 
    height: 100px; 
    width: 100px; 
} 


.dropzone img { 
    border-radius: 10px; 
    vertical-align: middle; 
    min-width: 100px; 
    min-height: 100px; 
}