0

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

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

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

这可能吗？

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

最好的方法是什么？

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

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

4

2 回答 2

2

只是一个可能对您有用的快速想法。它基于这样一个事实，即垂直填充/边距在设置为百分比时使用父框的宽度，因此可以相对于其父框调整 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;
}​
于 2012-06-16T19:48:38.650 回答
1

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

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

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

于 2012-06-16T19:56:32.757 回答