1

Есть вот такой вот блок:

.inner {
  width: 400px;
  height: 400px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.date {
  font-family: Courier New, monospace;
  color: #424242;
  font-size: 10px;
  position: relative;
  left: 5px;
}

hr {
  color: red;
  /* Цвет линии для остальных браузеров */
  background-color: red;
  position: relative;
  margin: 3px;
  border: 0;
  height: 2px;
}

.header {
  width: 360px;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
}
<div class="inner">
  <div class="header">Заголовок</div>
  <span class="date">25/07/2017</span><br>
  <hr>
  <div class="img"></div>
</div>

И внизу статьи все оставшееся место в блоке должно занимать изображение. Если заголовка одна строчка, то я делаю это таким кодом:

.news_img {
  background: url(../images/test.jpg) no-repeat;
  height: 354px;
  background-size: cover;
}

И получается полное заполнение, но если название заголовка занимает 2 строчки, то изображение едет вниз. Как можно сделать так, чтобы изображение уменьшалось под оставшееся место? Проценты не прокатывают, потому что тогда изображение подстаивается под всю высоту блока, без учета заголовка.

0

1 ответ 1

2

Задайте для .inner {overflow:hidden} - тогда картинка не будет выезжать за пределы блока.

.inner {
  width: 400px;
  height: 400px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

.date {
  font-family: Courier New, monospace;
  color: #424242;
  font-size: 10px;
  padding: 0 5px;
}

hr {
  color: red;
  /* Цвет линии для остальных браузеров */
  background-color: red;
  position: relative;
  margin: 3px;
  border: 0;
  height: 2px;
}

.header {
  width: 360px;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
}

.img {
  height: 100%;
  background: url(http://images.all-free-download.com/images/wallpapers_large/republic_of_singapore_air_force_17480.jpg) no-repeat center;
  background-size: cover;
}
<div class="inner">
  <div class="header">Заголовок Заголовок Заголовок Заголовок </div>
  <span class="date">25/07/2017</span><br>
  <hr>
  <div class="img"></div>
</div>

Ваш ответ

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

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