Сохранение / масштабирование DIV Ratio с процентами

На данный момент у меня есть макет, который тянет несколько миниатюр вgrid - каждый определяется стилем, который поддерживает их в фиксированном соотношении (примерно 16: 9), которое определяется размерами в пикселях (389px x 230px) но они выглядят немного маленькими на экранах высокого разрешения.

Изображения фактически вытягиваются в DIV в качестве фона, который покрывает100% ширина и высотаDIV и тогда очевидно, что DIV контролируют аспект и размер.

То, что я хотел бы сделать, это иметь динамическое изменение размеров этих DIV в зависимости от размера страницы устройства, но для сохранения соотношения DIV.

Это возможно?

Мои мысли заключаются в том, чтобы установить ширину в зависимости от процентного содержания страницы, но тогда я не уверен, как мне установить высоту и сохранить правильное соотношение сторон (из-за разного разрешения и т. Д.)

Каков был бы лучший способ сделать это?

EDIT - Спасибо за все ваши идеи, подумал, может быть, я должен показать вам, как я собираю данные в данный момент.

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 может плавать по нижней части изображения.

 Trey16 июн. 2012 г., 21:25
Вы должны использовать div? если вы используете теги img, вы можете установить ширину в процентах, и она будет поддерживать соотношение сторон ...
 Michelle16 июн. 2012 г., 21:44
Я не верю, что фоновые изображения будут автоматически изменяться так, как вы хотите, но фоновые изображения будут изменяться, поэтому, если вы можете вставлять фактические теги img, а не загружать их в качестве фоновых изображений, у вас должно быть все в порядке.

Ответы на вопрос(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 относительно родительского блока.

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

& # x200B; Если вы хотите поместить некоторый (не фоновый) контент в это поле с хорошими размерами, поместите внутри него абсолютно позиционированный div.

Ссылка:

http://www.w3.org/TR/CSS2/box.html#margin-properties а также http://www.w3.org/TR/CSS2/box.html#padding-properties говорит:

Поля: "Процент рассчитывается относительно ширины сгенерированного блока, содержащего блок. Обратите внимание, что это верно для «margin-top» и «поле снизу»; также. Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1. & Quot;

Отступы: "процент вычисляется относительно ширины сгенерированного блока, содержащего блок, даже для" padding-top "; и 'padding-bottom'. Если ширина содержащего блока зависит от этого элемента, то результирующий макет не определен в CSS 2.1. & Quot;

EDIT

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;
}​
 hj8ag20 июн. 2012 г., 13:37
Удивительно, спасибо biziclop - есть ли способ разместить заголовки над изображением a l & # xE1;jsfiddle.net/mszBF/3 ?
 20 июн. 2012 г., 13:42
Как это?jsfiddle.net/mszBF/12 Конечно, вы можете изменить.title вposition:absolute если это работает лучше.

Ваш ответ на вопрос