0

Учусь делать верстку, хочу натянуть ее на laravel сделать для себя блог от начала до конца и научиться верстке работе с фреймворком итд. Использую чистый CSS Через пред процессор. И вот загвоздка, сделал обтекаемою картинку но если мало текста то она выходит за границу блока, как масштабировать картинку по высоте блока и так сделать чтобы картинка растягивала блок а не выпадала из него, еще не выбрал что лучше будит смотреться, но для обучения нужно разобраться с двумя решениями.

введите сюда описание изображения

введите сюда описание изображения

#content {
  margin-left: $widthMenu;
  margin-right: $widthMenu;
  min-height: 100vh;
  .post {
    background-color: #eee;
    margin-bottom: 10px;
    box-shadow: 0 0 3px #333;
    border-radius: 3px;
    //$Border
    padding: 15px;
    min-height: 50%;
    font-family: cambria;
    img {
      //height:300px;
      box-shadow: 0 0 3px #333;
      margin: 10px;
      float: left;
      border: 7px solid #eee;
      width: 50%;
      vertical-align: top;
      max-width: 250px;
    }
    .img {
      box-shadow: 0 0 3px #333;
      margin: 10px;
      border: 7px solid #eee;
      width: 100px;
      ;
      height: 100px;
      ;
      background-size: cover;
      //max-width:250px;
      vertical-align: top;
    }
    .title {
      font-size: 27px;
      color: #777;
      text-shadow: 0 0 1px #333;
      transition: 0.3s;
      font-family: cambria;
      &:hover {
        text-shadow: 0 0 3px #333;
        cursor: pointer;
      }
    }
    p {
      margin: 5px;
    }
    .postFutter {
      margin-top: 7px;
      text-align: right;
      a {
        color: #aaa;
      }
    }
  }
}
HTML
<div class='post'>
  <a class="title">Кубизм</a>
  <hr>
  <img src="data/media/media3.jpg">
  <!--div class = "img" style = "background-image: url('data/media/media3.jpg');" ><div-->


  <p>
    Took me two hours, got the 4 minute speedrun trophy under two seconds short of the limit after countless of restarts. Very satisfying once you finally succeed. For two dollars it's a fantastic game at a fantastic prize (on the US store, EU was 3€)

  </p>
  <hr>
  <div class='postFutter'>


    <a href="#">Коментарів (0) | </a>
    <a>Дата: 21.06.2021</a>

  </div>
</div>

Решение желательно на css Весь проект

1

1 ответ 1

0

Добавь в конец блока с классом 'post' еще один блок, и дай ему класс например 'clearfix'. Потом в стилях допиши:

.clearfix { clear:both; }
6
  • Попробовал но к сожалению ничего не изменилось, код всего проекта по верстке на гугл диск кинул
    – BOTEMM
    Commented 22 июн. 2021 в 14:38
  • Нет все заработало спасибо, напутал со вложенными элементами.
    – BOTEMM
    Commented 22 июн. 2021 в 20:19
  • Проявилась следующая проблема, при развороте меню, меню растягивает пост
    – BOTEMM
    Commented 22 июн. 2021 в 20:23
  • Применил clear:left; Заработало, меню не меняет размер поста, но кто его знает что будит если левое меню станет больше поста.
    – BOTEMM
    Commented 22 июн. 2021 в 20:33

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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