На данный момент у меня есть макет, который тянет несколько миниатюр вgrid - каждый определяется стилем, который поддерживает их в фиксированном соотношении (примерно 16: 9), которое определяется размерами в пикселях (389px x 230px) но они выглядят немного маленькими на экранах высокого разрешения.

Изображения фактически вытягиваются в DIV в качестве фона, который покрывает100% ширина и высотаDIV и тогда очевидно, что DIV контролируют аспект и размер.

То, что я хотел бы сделать, это иметь динамическое изменение размеров этих DIV в зависимости от размера страницы устройства, но для сохранения соотношения DIV.

Это возможно?

Мои мысли заключаются в том, чтобы установить ширину в зависимости от процентного содержания страницы, но тогда я не уверен, как мне установить высоту и сохранить правильное соотношение сторон (из-за разного разрешения и т. Д.)

Каков был бы лучший способ сделать это?

EDIT - Спасибо за все ваши идеи, подумал, может быть, я должен показать вам, как я собираю данные в данный момент.

In my HTML I've got the following code which generated the grid

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

This is styled with the following 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;
}

Причина, по которой я реализую это таким образом, заключается в том, что Div может плавать по нижней части изображения.