Держите высоту div во время загрузки изображения

У меня квадратное изображение внутри .img-container. Иногда загрузка изображения занимает несколько секунд, а .img-container сжимается и занимает только высоту при загрузке изображения. Тем не менее, я хотел бы, чтобы он сохранял полную высоту (как если бы изображение было там), пока изображение загружается.

Я бы легко сделал это, установив класс min-height on img-container, однако он представляет собой гибкую сетку, и изображение реагирует (класс вспомогательного класса бутстрапа img-responsive), что затрудняет установку min- высоту до соответствующего значения для разных размеров экрана (хотя это возможно с помощью медиа-запросов в качестве последнего средства). Решая это, помещая изображение места, похожее на излишний (особенно на мобильных устройствах). Кроме того, не уверен, что сначала загрузило бы изображение места или изображение.

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <div class="card">
      <span class="img-container thumbnail clearfix">
        <img alt class="pull-left img-responsive" src="http://...">
      </span>
      <div class="caption">
        <a href="#" onclick="location.href='http://..'; return false;" class="card-title lead">
          Some text
        </a>
      </div>
    </div>
  </div>

Ответ 1

ИЗМЕНИТЬ ИЗ КОММЕНТАРИИ

Если вы не укажете источник вообще (даже не фиктивный, временный), браузер даже не попытается "угадать" высоту изображения, и поэтому он обрушится. Если вы знаете соотношение изображения (очевидно, 1:1 в случае квадратного изображения), вы можете использовать следующий трюк, чтобы заняться пространством и масштабировать изображение вместе с div.

Задайте следующий CSS:

.test-div-inner {
    padding-bottom:100%;
    background:#EEE;
    height:0;
    position:relative;
}
.test-image {
    width:100%;
    height:100%;
    display:block;
    position:absolute;
}

Затем вы можете использовать следующий HTML:

<div class="test-div-inner">
    <img class="test-image" src="http://goo.gl/lO9SUU">
</div>

Вот рабочий пример: http://jsfiddle.net/pQ5zh/3/

Обратите внимание, что скрипта содержит еще один элемент div, это требуется только в том случае, если вы хотите дать ему все дополнение или границу, поскольку padding-bottom вычисляет отступы в пикселях в зависимости от ширины div ВКЛЮЧАЯ ЭТИ ПАРАМЕТРЫ, что НЕ является результатом, которого мы хотим достичь (изображение будет немного выше, чем должно быть).

Для неквадратных изображений:

Если вы хотите изменить соотношение изображения, просто измените padding-bottom контейнера div соответственно. Например, если вы хотите разместить изображение с соотношением 2: 1, измените отступ на 50%. Чтобы оно было коротким: отношение ширины контейнера div и отступов всегда должно быть равно отношению ширины и высоты изображения.

Существует простой способ сделать именно это, но работает только для квадратных изображений.
Укажите ширину изображения (используя CSS) как 100%. Таким образом, браузер автоматически предположит, что высота изображения такая же, как ширина, и занимать место.

http://jsfiddle.net/pQ5zh/2/

.test-image {
    width:100%;
}

Примечание. Существует также способ достижения этого для неквадратных изображений, но это немного сложнее.

РЕДАКТИРОВАТЬ: см. выше.

Ответ 2

Хорошо, если все изображения квадратные, мы можем это сделать. Добавьте дополнительный div вокруг вашего изображения следующим образом:

<div class="img-container"> <div class="image-wrap">IMAGE HERE</div> </div>

Затем мы хотим, чтобы CSS по линиям

.img-container {
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;
}

.img-container:before{
content: "";
display: block;
padding-top: 100%; 
}

.image-wrap {
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

См. это в действии: http://jsfiddle.net/jamesking/LNvmY/

Вы хотите удалить ширину, установленную в .img-container