Take the 2-minute tour ×

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.

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

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 - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment...

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>

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

The reason I'm implementing it this way is so that the Div can float over the bottom of the image.

share|improve this question
do you have to use divs? if you use img tags you can set the width to a percentage and it will maintain the aspect ratio... –  Trey Jun 16 '12 at 19:25
I don't believe background images will resize automatically the way you want but foreground images will, so if you can insert actual img tags rather than loading them as background images you should be okay. –  Michelle Jun 16 '12 at 19:44
add comment

2 Answers

up vote 0 down vote accepted

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 :) */

​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 and http://www.w3.org/TR/CSS2/box.html#padding-properties says:

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

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




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


.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;
share|improve this answer
Amazing, thankyou biziclop - Would there be a way to float the Titles on top of the image a lá jsfiddle.net/mszBF/3 ? –  hj8ag Jun 20 '12 at 11:37
Like this? jsfiddle.net/mszBF/12 Of course you can change .title to position:absolute if it works better. –  biziclop Jun 20 '12 at 11:42
add comment

I know this might not be the best solution, but

<style type="text/css">
<div id="cool" >

Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.

share|improve this answer
add comment

Your Answer


