Question

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

图像实际上作为背景被拉入DIV，覆盖100%的{{1}}宽度和高度，然后DIV显然控制了方面和大小。

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

这可能吗？

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

最好的方法是什么？

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

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

DIV

使用以下CSS
进行样式设置

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

我以这种方式实现它的原因是Div可以漂浮在图像的底部。

Answer 1

只是一个可能对您有用的快速想法。它基于以下事实：垂直填充/边距在设置为百分比时使用父框的宽度，因此可以相对于其父框调整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说：

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

填充：“百分比是根据生成的框的包含块的宽度计算的，即使是'padding-top'和'padding-bottom'。如果包含块的宽度取决于此元素，则生成的布局在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;
}

Answer 2

我知道这可能不是最好的解决方案，但是

<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>

这里我使用了padding-bottom，以保持其相对于宽度的高度。你可以将padding-bottom设置为百分比。希望这有帮助。

保持/缩放DIV比率与百分比

2 个答案:

修改