Question

目前我有一个将多个缩略图拉入网格的布局 - 每个都由一个样式定义，使它们保持固定的比例（大约16：9），由像素尺寸定义（389像素x 230像素）但是他们在高分屏幕上看起来有点小。

在我的HTML中，我有以下代码生成网格

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

使用以下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可以漂浮在图像的底部（这里是一个非常crude example，为了清晰起见，图像被替换为蓝色和红色）< / p>

我要做的是让这些DIV根据设备的页面大小动态调整大小，但要保持DIV的比例......这可能吗？

我的想法是根据页面的百分比来设置宽度 - 但是我不确定如何设置高度并保持正确的宽高比（由于不同的分辨率等...）

最好的方法是什么？

调整DIV网格大小并保持图像宽高比

0 个答案: