No momento eu tenho um layout que puxa um número de miniaturas em umgrid - cada um é definido por um estilo que os mantém uma proporção fixa (aproximadamente 16: 9) que é definida por dimensões de pixel (389px x 230px), mas eles estão parecendo um pouco pequenos em telas de alta resolução.

As imagens são realmente puxadas para o DIV como um fundo que cobre100% largura e altura doDIV e então os DIVs obviamente controlam o aspecto e o tamanho.

O que eu quero fazer é fazer com que esses DIVs sejam redimensionados dinamicamente com base no tamanho da página do dispositivo, mas manter a proporção dos DIVs.

Isso é possível?

Meu pensamento seria definir a largura com base na porcentagem da página, mas não sei como definiria a altura e manteria a proporção correta (devido a diferentes resoluções etc.)

Qual seria a melhor forma de fazer isso?

EDITAR - Obrigado por todas as suas ideias até agora, pensei que talvez devesse mostrar a você como estou puxando os dados no momento.

No meu HTML eu tenho o seguinte código que gerou a grade

<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>

Isso é estilizado com o seguinte 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;
}

A razão pela qual estou implementando isso é para que o Div possa flutuar sobre a parte inferior da imagem.