2

Есть блок-обертка wrap, который может быть разной высоты.

Внутри него есть три блока - top, middle и bottom.

Высота блоков middle и bottom может быть разная, а блок top занимает оставшееся пространство.

Внутри top лежит content, внутри которого есть content_middle у каждого из них задана высота 100%.

Внутри последнего лежит само изображение, у которого так же задана высота 100%.

Но так не работает - изображение всё-равно остается в исходном размере и middle и bottom вылезают за пределы wrap.

Как можно сделать, чтобы все эти блоки не вылезали за пределы wrap?

Здесь не работает:

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.content_middle img {
  height: 100%;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}
<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
        <img src="https://via.placeholder.com/300x550.jpg/e9ff2d" alt="">
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Здесь работает:

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.content_middle img {
  height: 100%;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}
<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Второй пример без изображения и там все отлично получается. Нужно так же, только с картинкой.

Из структуры удалил несколько блоков, которые не влияют на ситуацию, поэтому такая вложенность.

1 ответ 1

3

Все работает корректно если добавить "болванку" в пример номер два:

img {
  width: auto;
  max-height: 100%;
  padding: 0;
  margin: 0;
}

.wrap {
  width: 500px;
  height: 500px;
  display: flex;
  flex-direction: column;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  flex: 1px;
  background-color: #f4f4f4;
  padding: 10px 10px 0;
}

.content {
  position: relative;
  height: 100%;
}

.content_middle {
  position: relative;
  z-index: 2;
  height: 100%;
  margin-left: 20px;
  margin-right: 20px;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
  flex: none;
}

.bottom {
  height: 50px;
  margin-top: 15px;
  background-color: blue;
  flex: none;
}
<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle">
        <img src="https://i.picsum.photos/id/916/200/300.jpg?hmac=AlGE1xEsSBVvJKbHoDnjf9v5TRINh8LNMN6xwzQieO0" />
      </div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

Альтернативный подход с использованием background-image:

img {
  max-width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

.wrap {
  display: grid;
  grid-template-rows: 1fr max-content max-content;
  width: 500px;
  height: 500px;
  background-color: #000;
  padding: 10px 20px;
}

.top {
  background-image: url("https://picsum.photos/400/600");
  background-size: cover;
  background-position: center;
}

.middle {
  height: 50px;
  margin-top: 15px;
  background-color: red;
}

.bottom {
  height: 50px;
  background-color: blue;
  margin-top: 15px;
}
<div class="wrap">
  <div class="top">
    <div class="content">
      <div class="content_middle"></div>
    </div>
  </div>
  <div class="middle"></div>
  <div class="bottom"></div>
</div>

3
  • не работает, если вставить изображение более высокое. в конкретно этом случае плывет, если картинка больше 360рх по высоте
    – Dima
    20 авг 2020 в 19:06
  • @Dima у тебя стоит высота блока 500px, конечно поплывет
    – Burg
    20 авг 2020 в 19:35
  • @Burg так в том и проблема. нужно, чтобы не плыло
    – Dima
    20 авг 2020 в 20:05

Ваш ответ

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

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