Как настроить размер изображения, чтобы максимально использовать максимально возможный экран?

Question

Я работаю над веб-интерфейсом, который будет использоваться для мониторинга событий, события будут отображаться на пользовательском интерфейсе в качестве изображений, это изображение исчезнет через определенное время. Пользовательский интерфейс будет открыт в полноэкранном режиме на стенном мониторе. Теперь, учитывая количество снимков N, как можно изменить размер изображений для оптимального использования экрана? Исходный размер изображения составляет 1280 * 720, такое же соотношение должно сохраняться при масштабировании вверх или вниз, и все изображение должно быть того же размера. Экран высоты и ширины целевого экрана являются переменными. Число снимков N будет меньше 100. Может ли кто-нибудь предложить эффективный, простой в реализации алгоритм?

Благодаря Сорин, вот код, который я получил, это работает очень хорошо для этой проблемы:

function resize(){ 
    var ratio=1280/720; 
    var w=document.getElementById("container").clientWidth; 
    var h=document.getElementById("container").clientHeight; 
    var n=$("video").length; 
    var R=ratio/(w/h); 
    var width,height; 
    var column=1; 

    if(n>0){ 
     while(column*Math.ceil(column*R)<n){ 
      column++; 
     } 
     var row=Math.ceil(column*R); 
     height=Math.min(h/row,w/column/ratio)-12;//12 pixel margin 
     width=height*ratio; 
     $("video").height(height).width(width) 
    } 
} 

Answer 1

Первая цифра, как изменить соотношение. Картинки имеют соотношение 1280/720, а дисплей имеет ширину/высоту. Таким образом, вам понадобится 1 на 1280/720/(width/height) картинок в вашей сетке, чтобы исправить соотношение (назовем это число R). Теперь вам нужен множитель, чтобы получить количество изображений, которые вы показываете, чтобы быть числом ваших фотографий. Вам нужно найти M такое, что (M * floor (M * R)> N), так как N мало, простейшая итерация будет делать.

Итак, теперь вы собираетесь показывать M изображений с помощью M * R изображений в сетке.

Все что вам нужно - это масштабировать все изображения вниз. Чтобы убедиться, что мы оставляем как можно меньше пробелов, берем S как min (width/(1280 * M), height/(720 * floor(M *R))).

Так масштабируйте все снимки по S и покажите их в сетке с M колонками и полосами (M * R).

Все это предполагает, что 1280 и 720 включают любые пробелы, которые вы можете оставить между изображениями. В противном случае вам нужно будет пересмотреть расчеты.