Как правильно положить img в гибкий контейнер

Question

.item:nth-child(1)
.item:nth-child(2)
.item:nth-child(3)

рушатся, когда я помещаю изображение.

вы можете увидеть, что происходит на http://dainielhhong.com/page1.html

 .container{
          display: flex;
          margin: auto;
          margin-top: 2vh;
          height: 88vh;
          width: 67vw;
          border-top: 2px black solid;
          border-left: 2px black solid;
          border-right: 2px black solid;
      }
    .item:nth-child(1){
      flex: 1;
      height: 28vh;
      border-right: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(2){
      flex: 2.6;
      height: 28vh;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(3){
      flex: 1;
      height: 28vh;
      border-left: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }

<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <img src="crack.svg">
     </div>

Я хочу, чтобы изображение не рассыпалось: nth-child (1) (2) (3).

Что я должен сделатьделать?

Answer 1

Вы можете установить flex-basis с процентом для каждого элемента, сделать первые 3 100% в общей сложности и добавить

flex-wrap: wrap

в контейнер.Также обратите внимание, что я добавил

box-sizing: border-box;

к каждому элементу, поэтому в процентах будет указан размер границы.

или любое значение, которое будет соответствовать нужному соотношению

.container {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  margin-top: 2vh;
  height: 88vh;
  width: 67vw;
  border-top: 2px black solid;
  border-left: 2px black solid;
  border-right: 2px black solid;
}

.item:nth-child(1) {
  flex-basis: 22%;
  height: 28vh;
  border-right: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.item:nth-child(2) {
  flex-basis: 56%;
  height: 28vh;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.item:nth-child(3) {
  flex: 22%;
  height: 28vh;
  border-left: 2px black solid;
  border-bottom: 2px black solid;
  font-family: 'Indie Flower', cursive;
  box-sizing: border-box;
}

.container img{
  flex-basis: 100%;
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="item">
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
  <img src="https://svgshare.com/i/AFb.svg">
</div>

Answer 2

Вот 3 способа позиционирования изображения

2 первых способа изменить html, потому что вы используете flex

Последний способ позиционирования img

 .container{
          display: flex;
          margin: auto;
          margin-top: 2vh;
          height: 88vh;
          width: 67vw;
          border-top: 2px black solid;
          border-left: 2px black solid;
          border-right: 2px black solid;
          position: relative;
      }
      .img{
       position: absolute;
       right: 99px;
      }
    .item:nth-child(1){
      flex: 1;
      height: 28vh;
      border-right: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(2){
      flex: 2.6;
      height: 28vh;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }
    .item:nth-child(3){
      flex: 1;
      height: 28vh;
      border-left: 2px black solid;
      border-bottom: 2px black solid;
      font-family: 'Indie Flower', cursive;

    }

<h1>image after container</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
</div>
<img src="crack.svg"> 

<h1>image inside nth-child(3)</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     <img src="crack.svg">
     </div>
</div>
 
<h1>image inside nth-child(3) with css and not change html</h1>
<div class = "container">
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <div class = "item">
     </div>
     <img src="crack.svg" class="img">
</div>

Answer 3

Если вы хотите поместить изображение ниже гибких элементов, оберните ваш .container в родительский контейнер и поместите изображение туда.В настоящее время flex сжимает изображение в той же строке, что и элементы.

<div class="parent-container">
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <img src="crack.svg">
</div>

Теперь введите стиль .parent-container как ваш .container и измените значение контейнера на display: flex.

.

Теперь, если бы мне пришлось угадывать, вы хотите использовать SVG в качестве разделителя.Для этого также добавьте img { width: 100%; } и удалите фиксированный height: 88vh из вашего .parent-container.

Результат будет: