2017-01-24 8 views
0

Это своего рода трудно объяснить. Я буду стараться изо всех сил.Установите высоту div перед загрузкой изображения

У меня есть динамические изображения, которые загружаются в div (подумайте об изображениях Instagram в фиде). изображения расширяются или уменьшаются с размером экрана (отзывчиво). У меня ширина установлена ​​на 100%, а высота - автоматически. Проблема заключается в том, что высота div равна нулю, пока изображение не загружается, чем div расширяется вместе с изображением. Мне бы хотелось, если div (Box это изображение находится) был установлен на загрузку страницы до правильной высоты, прежде чем изображение даже начнет загружать/заполнять div. Желаемый результат будет выглядеть; при загрузке страницы у вас есть фид ящиков, которые настроены на нужный размер, тогда изображения заполняют эти поля при загрузке.

Мой ДИВ КСС:

padding: 0 10px 0 8px; 
box-sizing: border-box; 

Мой образ КСС:

width: 100%; 
height: auto; 
border-radius: 18px; 
border: 1px solid #eeefef; 
background: #eee; 
+2

и соотношение изображений может отличаться, или речь идет о изображениях с квадратным размером, например? – Kejt

+1

Знаете ли вы размеры изображения перед его загрузкой? Вы, конечно, нуждаетесь в этом. – Aaronius

+0

Я делаю, но он также масштабируется до размера экрана/устройства, на котором он загружается. вот почему я установил его на ширину 100% –

ответ

0

Нет, вы не можете установить размер Div к изображению, не зная размера изображения. лучше попробуйте использовать постоянную высоту и ширину для div.

+0

Я не могу. размеры экрана телефона слишком разные. –

+0

Для телефонов используйте запрос мультимедиа и установите ширину на 100% и позвольте высоте div быть постоянным – AravindVasudev

+0

Я имел в виду примерно следующее: https://jsfiddle.net/1ga0oej2/ – AravindVasudev