DIV-Verhältnis mit Prozentsätzen beibehalten / skalieren

Im Moment habe ich ein Layout, das eine Reihe von Thumbnails in ein ziehtgrid - Jedes wird durch einen Stil definiert, der ein festes Verhältnis (ungefähr 16: 9) einhält, das durch die Pixelabmessungen definiert wird (389px x 230px) aber sie sehen auf hochauflösenden Bildschirmen etwas klein aus.

Die Bilder werden als überdeckender Hintergrund in den DIV gezogen100% Breite und Höhe derDIV und dann kontrollieren die DIVs offensichtlich den Aspekt und die Größe.

Ich möchte, dass diese DIVs die Größe basierend auf der Seitengröße des Geräts dynamisch ändern, aber das Verhältnis der DIVs beibehalten.

Ist das möglich?

Meine Gedanken wären, die Breite basierend auf dem Prozentsatz der Seite einzustellen, aber dann bin ich mir nicht sicher, wie ich die Höhe einstellen und das richtige Seitenverhältnis beibehalten würde (aufgrund unterschiedlicher Auflösungen usw.).

Was wäre der beste Weg, dies zu tun?

BEARBEITEN - Vielen Dank für all Ihre Ideen, dachte vielleicht sollte ich Ihnen zeigen, wie ich die Daten im Moment einsetze.

In meinem HTML habe ich den folgenden Code, der das Raster generiert

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

Dies ist mit dem folgenden CSS gestaltet

.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;
}

Der Grund, warum ich es so implementiere, ist, dass der Div über den unteren Rand des Bildes schweben kann.

Antworten auf die Frage(2)

Ihre Antwort auf die Frage