css - 用百分比保持/缩放 DIV 比率

Question

目前我有一个布局，可以将一些缩略图拉入一个 grid - 每个缩略图都由一种样式定义，该样式使它们保持固定比例(大约 16:9)，该比例由以下定义像素尺寸 (389px x 230px)，但它们在高分辨率屏幕上看起来有点小。

图像实际上作为覆盖 DIV 的 100% 宽度和高度的背景拉入 DIV，然后 DIV 显然控制纵横比和大小。

我想要做的是根据设备的页面大小动态调整这些 DIV 的大小，但要保持 DIV 的比例。

这可能吗？

我的想法是根据页面的百分比设置宽度，但我不确定如何设置高度并保持正确的纵横比(由于不同的分辨率等)

执行此操作的最佳方法是什么？

---

编辑 - 感谢您到目前为止提出的所有想法，我想也许我应该向您展示我目前是如何提取数据的。

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 可以 float 在图像的底部。

Answer 1

只是一个可能对您有用的快速想法。它基于这样一个事实，即垂直填充/边距在设置为百分比时使用父框的 WIDTH，因此可以相对于其父框调整 div 的大小

http://jsfiddle.net/xExuQ/2/

body,html { height:100%; }

.fixed-ratio-resize {
    width:          50%; /* child width  = parent width * percent */
    padding-bottom: 50%; /* child height = parent width * percent */
    height: 0;           /* well, it is not perfect :) */
}

如果您想将一些(非背景)内容放入这个调整大小的盒子中，然后将一个绝对定位的 div 放入其中。

引用:

http://www.w3.org/TR/CSS2/box.html#margin-properties和 http://www.w3.org/TR/CSS2/box.html#padding-properties说:

边距:“百分比是根据生成的框的包含 block 的宽度计算的。请注意，这对于'margin-top'和'margin-bottom'也是如此。如果包含 block 的宽度取决于此元素，那么生成的布局在 CSS 2.1 中是未定义的。”

Paddings:“百分比是相对于生成框的包含 block 的宽度计算的，即使对于'padding-top'和'padding-bottom'也是如此。如果包含 block 的宽度取决于这个元素，那么得到的布局在 CSS 2.1 中未定义。”

编辑

http://jsfiddle.net/mszBF/6/

HTML:

<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
    <span class="titles">
        <span class="name">Unicomp Studios</span>
        <span class="title">Springs Buckling (2012)</span>
    </span>
</a>

CSS:

.griditem {
    float: left;
    margin-right:  17px;
    margin-bottom: 17px;
    min-width:  100px; /* extremely narrow blocks ==> crap looking */
    width: 30%;
    background: blue no-repeat;
    background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
    border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}

.titles {
    /* <a> elements must only have inline elements like img, span.
       divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
    display: block; /* so display those inline elements as blocks */
    padding: 5px;
    margin: 0 auto;
    margin-top: 105%;
    background: yellow;
}

.titles > span {
    display: block;
}​