HTML CSS: разместить элементы flexbox рядом друг с другом

Question

Я работаю над проектом, в котором мне нужно создать веб-страницу книжного онлайн-магазина, используя только HTML и CSS. Я хочу отображать информацию «о нас» для магазина, используя стиль, как на изображении ниже:

В основном я хочу разместить изображение и текст, как показано выше. Однако при использовании flexbox у меня возникают проблемы с синхронизацией изображения и текста, которые у меня есть, потому что мне трудно установить ширину изображения, чтобы покрыть половину гибкого контейнера и часть моего текста - другую половину. Это мой код:

.flex-container {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  background-color: orange;
  opacity: 0.7;
}

.flex-container>div {
  margin: 0;
  width: 100%;
  height: auto;
}

#fleximg>img {
  width: 60%;
  height: auto;
}

#about {
  width: 50%;
  margin-right: 300px;
  height: auto;
}

<div class="flex-container">

  <div id="fleximg"><img src="https://placehold.it/400x400" alt=d esk/></div>

  <div id="about">
    <!-- text i want to place next to image -->
    <h1> ABOUT US </h1>
    <p>
      In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
      a book at a local bookshop .

    </p>
  </div>

</div>

Когда я запускаю свою страницу, я получаю изображение ниже, где изображение и текст не расположены рядом друг с другом, и у меня возникают проблемы с изменением их размеров

Буду признателен за вашу помощь в решении моей проблемы

Answer 1

Во-первых, если высота изображения выше, чем содержимое правого столбца - даже простой width: 100%; height: auto для image может работать.

div{
  border: 2px solid black;
}

#fleximg img{
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.flex-container {
  display: flex;
  background-color: orange;
}

#fleximg{
  flex-basis: 40%;
}

#about {
  flex-basis: 60%;
  display: flex;
  align-items: center; /* align v */
}

<div class="flex-container">
  <div id="fleximg" class="col">
    tall image
    <img src="https://placehold.it/400x700" alt=d esk/>
  </div>

  <div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
     
    </div>
  </div>

</div>

Но идея выше менее полезна для динамических c сайтов. Более гибкие подходы:

По фоновому изображению

Для «левого столбца» используйте фоновое изображение и background-size: cover.

div{
  border: 2px solid black;a
}
.flex-container {
  display: flex;
  background-color: orange;
}

#fleximg{
  flex-basis: 40%;
  background-image: url("https://picsum.photos/1111/1300");
  background-repeat: no-repeat;
  background-size: cover
}
#about {
  flex-basis: 60%;
  padding: 100px 10px;
  display: flex;
  align-items: center; /* align v */
}

<div class="flex-container">
  <div id="fleximg" class="col">
  </div>
  <div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
      <p>
        In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
        a book at a local bookshop .
      </p>

    </div>
  </div>

</div>

По элементу изображения

Без использования background-image для левого столбца эта идея более "хитрая".

Для элемента img - одна идея / решение - использовать этот «трюк»: https://css-tricks.com/aspect-ratio-boxes/

Установить image col "родительскую" позицию в relative и поместите внутри абсолютное изображение (100% ширина / высота + размер объекта: обложка).

div{
  border: 2px solid black;
}
.flex-container {
  display: flex;
  background-color: orange;
}

#fleximg{
  flex-basis: 40%;
  top-padding: 100%;
  position: relative;
}

#fleximg > img {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: cover ;
}

#about {
  flex-basis: 60%;
  padding: 100px 10px;
  display: flex; 
  align-items: center; /* align v */
}

<div class="flex-container">
  <div id="fleximg" class="col">
    <img src="https://placehold.it/400x400" alt=d esk/>
  </div>
<div id="about" class="col">
    <!-- text i want to place next to image -->
    <div>
      <h1> ABOUT US </h1>
      <p>
        In these rough times we experience right now being forced to stay at home staring at nothing does actually nothing.This is why we have created this online book delivery website to provide the company of a book to those who can't go outside to buy or read
        a book at a local bookshop .

      </p>
    </div>
  </div>

</div>

Важно: С точки зрения дизайна - не существует решения magi c, подходящего для всех ситуаций. Это также зависит от количества содержимого (текст / изображения и т. Д.), Которое вы помещаете в правый столбец «содержимого», и ширины экрана (min-width / height / padding / margin и Media query пригодится ей).

Answer 2

Вы должны установить css class flex-container is width: 100% и #fleximg is width: 50%, #about is width: 50% и использовать фон в css вместо тега img.

Пример:

.flex-container {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    background-color: orange;
    opacity: 0.7;
    width: 100%;
    height: auto;
  };

  #fleximg {
    width: 50%;
    height: auto;
    background: url('') center no-repeat;
    background-size: cover;
  };

  #about {
    width: 50%;
    margin-right: 0;
    height: auto;
  };