CSS: Соотношение сторон элемента для заданной высоты

Вышеприведенная ссылка на возможный дубликат не является решением для этого случая, так как высота будет фиксированным значением для нескольких точек останова.CSS: Соотношение сторон элемента для заданной высоты

У меня есть некоторые DIVs с display:inline-block, поэтому они плавают красиво бок о бок. Эти DIV все имеют одинаковую высоту, например. height:300px. Позже я загружу изображение внутри каждого DIV с помощью Ajax, и я хочу, чтобы DIV сохранял соотношение сторон изображения, поэтому они не будут покачиваться вокруг, когда изображение действительно загружено.

Поэтому, когда в браузере отображаются DIV, изображения еще не установлены, поэтому установка высоты изображения с height:auto; не будет работать.

Пример кода:

<div class="wrapper"> 
    <div class="item">...</div> 
    <div class="item">...</div> 
    <!-- More items here --> 
</div>

CSS:

.item { 
    display:inline-block; 
    vertical-align:top; 
    height: 300px; 
    width: /* depending on the image ratio */ 
}

Теперь я знаю, как сохранить пропорции элемента для заданной ширины (см here или here). Но поскольку мои DIV должны иметь одинаковый рост, как я могу сохранить соотношение сторон и изменить только ширину?

Одним (не очень хорошим) решением было бы вставить пустое изображение и изменить его размер до нужных размеров.

Проблема: при изменении размера окна высота всех DIV будет меняться, поэтому просто рассчитать ширину недостаточно. Я мог бы пересчитать ширину с помощью Javascript, но я предпочитаю простую версию CSS (если возможно).

Итак, вот мой вопрос: Как я могу сохранить соотношение сторон для элемента для заданной высоты только с помощью CSS?

Благодаря

источник

2014-09-19 uruk

Возможный дубликат [Поддерживать пропорции div в зависимости от высоты] (http: // stackoverflow.com/questions/23789143/maintain-aspect-ratio-of-a-div-accord-to-height) –

Спасибо за вашу ссылку, но в моем примере DIV имеют фиксированную высоту. – uruk

У вас есть соотношение сторон, но не фактические размеры изображения. I думаю вы можете использовать функцию calc для этого. Поддержка браузеров является проблемой, хотя:

/* Note: using 30px height for demonstration */ 
 
.item { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    height: 30px; 
 
    background: #FC0; 
 
} 
 
.ratio-3-2 .item { 
 
    /* 3:2 = 1.5 */ 
 
    width: calc(30px * 1.5); 
 
} 
 
.ratio-4-3 .item { 
 
    /* 4:3 = 1.3333 */ 
 
    width: calc(30px * 1.3333); 
 
}

<div class="wrapper ratio-3-2"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div> 
 
<div class="wrapper ratio-4-3"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

В приведенном выше демо, первый набор дивы будет 45px широкий и второй набор будет 40px в ширину.

источник

2014-09-19 11:01:07

Это самое близкое решение, спасибо. Поскольку для каждого элемента отношение отличается, я тем не менее изменяю ширину, используя Javascript внутри domready-event. – uruk

Какая информация у вас есть при создании div? Если divs генерируются с помощью (например,) PHP, и у вас есть ширина и высота, вы можете встроить стили. –

Точно, но высота находится внутри таблицы стилей с несколькими точками останова – uruk

Я бы установить ширину DIV в соответствии с шаблоном я использую, так что это было бы реагировать, и добавить это в мой код:

img.item { 
width:auto; height:300px;width: auto\9; // for IE 
}

Это убедитесь, что вы может управлять DIV, пока изображения будут хорошо вписываться там

Разум, вы можете изменить его на максимальную высоту: 300 пикселей; для чувствительного сайта

источник

2014-09-19 07:13:11 PalDev

Вы правы, но изображение еще не загружено, просто упаковка DIV. При написании DIV я знаю соотношение изображений – uruk

Но при загрузке оно будет установлено автоматически – PalDev

Да, но это приведет к шевелению всех элементов на экране. Это то, что я хотел обойти. – uruk

CSS: Соотношение сторон элемента для заданной высоты

ответ

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