0

.no-image {
    background: url('/assets/images/no-image.jpg') no-repeat center center #FFF;
    background-size: contain;
}
.categories {
    float: left;
    width: 23%;
}
<div class="categories no-image" style="
     background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg') no-repeat;
     background-size: contain;
     margin: 1%;
     ">
<div class="categories-dark">
<span class="hint">C кремом</span>
<div class="link-category">
	<a href="kapkeyki  /s-kremom/" title="Классические капкейки с кремом">Выбрать </a>
</div>
</div>

</div>

Надо чтоб высота блока зависела от высоты картинки при заданной ширине. На чистом css, js реализация уже есть(

2 ответа 2

2

тут придётся реальную картинку вставлять, css -ом такое не сделать

1
  • Отмечу как правильный даже, у самого такие же грустные мысли) 5 авг 2016 в 8:52
1

Не совсем понял, но может быть подойдет одно из двух.

.no-image-1 {
  background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg');
  background-size: cover;
  min-height: 400px;
}
.categories {
  float: left;
  width: 23%;
}

.no-image-2 {
  background: url('http://pir.uborka25.ru/assets/img/sets/035nb-zhivi-yarko.jpg');
  background-size: cover;
}
<div class="categories no-image-1">
  <div class="categories-dark">
    <span class="hint">C кремом</span>
    <div class="link-category">
      <a href="kapkeyki  /s-kremom/" title="Классические капкейки с кремом">Выбрать </a>
    </div>
  </div>
</div>

<div class="categories no-image-2">
  <div class="categories-dark">
    <span class="hint">C кремом</span>
    <div class="link-category">
      <a href="kapkeyki  /s-kremom/" title="Классические капкейки с кремом">Выбрать </a>
    </div>
  </div>
</div>

2
  • к сожалению не то( Смотрите: я задаю ширину в процентах, и мне надо чтоб высота блока была равна ПОЛНОЙ высоте картинки, с шириной в данное к-во процентов 5 авг 2016 в 9:51
  • Мне кажется вам подходит пример слева no-image-1, в нем задана минимальная высота min-height: 400px равная высоте картинки.
    – stackanon
    5 авг 2016 в 9:53

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.