Dropzone wieloplatformowy generowanie miniatur

Question

Używam DropZone przesyłania obrazów i zauważyłem 2 problemy:

1. generowanie miniatur dla tego samego obrazu nie działa w niektórych przeglądarkach np dla dołączonego obrazu miniatura jest poprawnie wygenerowana w chromie, puste na safari i w firefoxie tylko na szarym tle.
2. W Safari większość miniatur jest generowanych poprawnie, ale nie dla niektórych rozmiarów/proporcji. na przykład ponownie dołączony obraz, jeśli zostanie rozciągnięty w poziomie, safari wygeneruje miniaturę, w przeciwnym razie nie.

Aktualizacja

Mam teraz ustalono, że jest to spowodowane przez „null” param o szerokości miniatur. Ustawienie wartości powoduje usunięcie problemu we wszystkich przeglądarkach. Najlepiej byłoby, gdyby miniatura była wyświetlana z zachowaniem oryginalnego współczynnika proporcji, ale wygląda na to, że nie działa w przypadku niektórych rozmiarów/przeglądarek, jak opisano powyżej.

Czy istnieje poprawka lub obejście tego problemu, aby móc wyświetlać miniatury w oryginalnych proporcjach?

Dropzone 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

Prawdopodobnie będziesz musiał obliczyć nową szerokość w oparciu o proporcjach obrazu oryginalnego i wielkości.

Zobacz tę drugą przepełnieniem stosu Q/pomysłu, w jaki sposób to zrobić:

Algorithm to resize image and maintain aspect ratio to fit iPhone

Answer 2

Spróbuj użyć następującego 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; 
}