En este momento tengo un diseño que arrastra una serie de miniaturas a ungrid - cada uno está definido por un estilo que los mantiene en una proporción fija (aproximadamente 16: 9) que se define por las dimensiones de los píxeles (389px x 230px) pero se ven un poco pequeños en las pantallas de alta resolución.

Las imágenes en realidad se introducen en el DIV como fondo que cubre100% ancho y alto de laDIV y luego los DIV's obviamente controlan el aspecto y tamaño.

Lo que estoy buscando hacer es que estos DIV se redimensionen dinámicamente según el tamaño de la página del dispositivo, pero para mantener la proporción de los DIV.

es posible?

Mi opinión sería establecer el ancho según el porcentaje de la página, pero luego no estoy seguro de cómo establecer la altura y mantener la relación de aspecto correcta (debido a diferentes resoluciones, etc.)

Cuál sería la mejor forma de hacer esto?

EDITAR - Gracias por todas tus ideas hasta ahora, pensé que tal vez debería mostrarte cómo estoy obteniendo los datos en este momento.

En mi HTML tengo el siguiente código que generó la grilla

<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
   <h5>Relentless Short Stories</h5>
   <h6>Frank Turner: The Road</h6>
</div>

Esto se diseña con el siguiente CSS

.griditem {
    position: relative;
    float: left;
    margin-right: 17px;
    margin-bottom: 17px;
    background-color: #777;
    -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 389px;
    height: 230px;
    text-align: left;
}

.titles {
    padding: 5px;
    position: absolute;
    bottom: 10px;
    left: -1px;
    right: -1px;
    background: transparent url(../images/layout/white80.png) top left;
    -moz-border-radius: 1px 1px 0 0;
    border-radius: 1px 1px 0 0;
    text-align: left;
}

La razón por la que lo estoy implementando de esta manera es para que la División pueda flotar sobre la parte inferior de la imagen.