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

.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>

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

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

вы хотите img внутри nth-child(3)?

— 01.01.2019 07:57

нет. Я хочу еще одну коробку. Вы можете увидеть <img src = "crack.svg"> в html-коде.

— 01.01.2019 09:54

html css flexbox

01.01.2019 07:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

985

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

В результате получится:

Final result

01.01.2019 07:57

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

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>

01.01.2019 08:04

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

Два первых способа - изменить 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>

01.01.2019 08:06

Другие вопросы по теме

Как разбить текст SVG многоточием с помощью CSS?

Изменить цвет H1, когда флажок установлен в CSS

Css выбрать все, но игнорировать конкретного родителя и всех его дочерних элементов

Разный размер поля для Firefox и Chrome

Установить полную ширину текста содержимого страницы?

Как сохранить фиксированную панель навигации перед элементами страницы, а не за ними

Как добавить круглую тень под прозрачный файл GIF?

Боковая панель навигации будет отображаться справа с использованием угловатого материала?

Стили CSS не применяются сразу при переключении класса с помощью jQuery

Содержать изображение фигуры в границах

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

Ответы 3

Другие вопросы по теме

Похожие вопросы