Сохранение пропорции Div при изменении размера

Я хочу сохранить пропорцию атрибута div при изменении размера браузера.Сохранение пропорции Div при изменении размера

У меня была эта проблема раньше, а затем решение использовалось с padding-bottom с процентом.

e.q. если я хочу div с классом foo, чтобы иметь соотношение сторон 2:1 У меня будет некоторый css, который выглядит так.

.foo{ 
    width: 100%; 
    padding-bottom: 50%; 
}

математика (height/width)*100 = percentage в этом случае (2/1)*100 = 50%. Если вам нужен div с соотношением сторон 16:9, то математика равна (9/16)*100 = 56.25% и т. Д.

Это работало для меня раньше, но теперь это не так. У меня есть fiddle, поэтому вы можете видеть, что я имею в виду.

Кажется, что у .caption-wrap высота, но я не знаю, откуда она.

источник

2015-02-24 Liam de Haas

Лишние belons высоты до высоты содержимого. То есть содержимое должно быть размещено абсолютно, чтобы не влиять на вычисленную высоту. –

@HashemQolami что-то вроде [этого] (http://jsfiddle.net/hpmu8wh0/2/)? –

Вы пытались использовать высоту: 0 для .caption-wrap? – kuba

проверить этот пример:

/* 
* Pure CSS aspect ratio with no spacer images or js! :) 
*/ 

body { 
    width: 36%; 
    margin: 8px auto; 
} 

div.stretchy-wrapper { 
    width: 100%; 
    padding-bottom: 56.25%; /* 16:9 */ 
    position: relative; 

    background: blue; 
} 

div.stretchy-wrapper > div { 
    position: absolute; 
    top: 0; bottom: 0; left: 0; right: 0; 

    color: white; 
    font-size: 24px; 
    text-align: center; 
} 

/* Other aspect ratios to try: 
* 56.25% = 16:9 
* 75% = 4:3 
* 66.66% = 3:2 
* 62.5% = 8:5 
*/

Ссылка на dabblet: http://dabblet.com/gist/2590942

источник

2015-02-24 09:15:51 Abdooapps

Сохранение пропорции Div при изменении размера

ответ

Смежные вопросы