保持/缩放DIV与百分比的比率 [英] Keeping/scaling DIV Ratio with percentages
问题描述
目前我有一个布局，将一些缩略图拉入网格 - 每个都由一种风格定义，保持固定比例（大约16：9），由像素尺寸（389像素×230像素）但他们在高分辨率屏幕上看起来有点小。
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
这些图像实际上是作为背景覆盖DIV的100％宽度和高度的DIV，然后DIV的显然控制的方面和大小...
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV -and then the DIV's obviously control the aspect and size...
我想要做的是让这些DIV根据设备的页面大小动态调整大小，但保持DIV的比例...这是可能吗？
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's... Is this possible?
我的想法是根据页面的百分比设置宽度 - 但是我不知道如何设置高度和保持正确的宽高比（由于不同的决议等...）
My thoughts would be to set the width based on the percentage of the page - but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc...)
这是最好的方法是什么？
What would be the best way to do this?
EDIT - 感谢您迄今为止的所有建议，也许我应该告诉您我目前如何收集数据...
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment...
在我的HTML我有以下代码生成网格
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>
/ p>
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可以浮动
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
推荐答案
只是一个快速的想法，可能对你有用。
它是基于这样的事实，即当它被设置为百分比时，垂直填充/边距使用父框的WIDTH，因此可以调整与父框相对的div。
Just a quick idea which might be useful for you. It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
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放在里面。
If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
参考：
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。
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Padsings：百分比是相对于生成框的包含块的宽度计算的，即使是'padding-top'和'padding-bottom '。如果包含块的宽度取决于此元素，那么结果布局在CSS 2.1中是未定义的。
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
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;
}
这篇关于保持/缩放DIV与百分比的比率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
