Zachowanie / skalowanie DIV Ratio z procentami

W tej chwili mam układ, który ciągnie kilka miniatur do postacigrid - każdy jest zdefiniowany przez styl, który zachowuje stały stosunek (około 16: 9), który jest określony przez wymiary pikseli (389px x 230px), ale wyglądają na małe na ekranach o wysokiej rozdzielczości.

Obrazy są w rzeczywistości wciągane do DIV jako tło, które obejmuje100% szerokość i wysokośćDIV i wtedy DIV oczywiście kontrolują aspekt i rozmiar.

To, czego szukam, to dynamiczna zmiana rozmiaru tych DIV-ów na podstawie rozmiaru strony urządzenia, ale utrzymanie proporcji DIV-ów.

czy to możliwe?

Moim zdaniem byłoby ustawić szerokość na podstawie procentu strony, ale nie jestem pewien, jak ustawiłbym wysokość i zachował właściwy współczynnik proporcji (z powodu różnych rozdzielczości itp.)

Jaki byłby najlepszy sposób, aby to zrobić?

EDYTOWAĆ - Dziękuję za wszystkie dotychczasowe pomysły, pomyślałem, że może powinienem pokazać ci, jak w tej chwili wciągam dane.

W moim HTML mam następujący kod, który wygenerował siatkę

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

Jest to stylizowany za pomocą następującego 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;
}

Powodem, dla którego implementuję to w ten sposób, jest to, że Div może unosić się nad dnem obrazu.

questionAnswers(2)

yourAnswerToTheQuestion