Использование Flexbox с изображениями

Question

Я начинающий веб-разработчик и недавно начал использовать Flexbox. Я считаю, что это отличный инструмент, но у меня есть небольшая проблема.

У меня есть изображение, которое я хочу разместить на своем сайте, со столбцом текста рядом с ним справа. Как видно из приведенного ниже кода, я создал div-оболочку с двумя вложенными div внутри нее.

Я установил атрибут display на 'flex' в обертке div и установил свойство flex на '1' для обоих div внутри. Я думал, что это заставит оба моих div'а занимать по 50% пространства каждый, но вместо этого кажется, что изображение занимает больше места, чем должно.

Я использовал пример изображения от Pexels. Мне интересно, влияет ли на это фактический размер необработанного изображения? Например, нужно ли мне вручную изменять размер всех моих фотографий, прежде чем размещать их на сайте, или есть способ, чтобы изображение всегда занимало 50% ширины, а текст занимал остальные 50%, используя flexbox?

Извините, если этот пост трудно понять. Ценю вашу помощь!

.wrapper
{
  display: flex;
  border: 3px solid red;
}

.image-div
{
  flex: 1;
}

.text-div
{
  flex: 1;
}

<div class="wrapper">
  <div class="image-div">
    <img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  </div>
  <div class="text-div">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In           itaque assumenda explicabo blanditiis! Mollitia adipisci            voluptates doloremque porro eaque dolor blanditiis deserunt.          Illum optio ut minus magni nemo ipsum obcaecati.
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. In           itaque assumenda explicabo blanditiis! Mollitia adipisci              voluptates doloremque porro eaque dolor blanditiis deserunt.        Illum optio ut minus magni nemo ipsum obcaecati.</p>
  </div>
</div>

Answer 1

Попробуйте следующее:

.wrapper {
  display: flex;
  border: 3px solid red;
}

.image-div {
  flex: 1;
  background-color: red;
  width: 100%;
}

.image-div>img {
  width: 100%;
}

.text-div {
  flex: 1;
  background-color: yellow;
  width: 100%;
}

<div class="wrapper">
  <div class="image-div">
    <img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" />
  </div>
  <div class="text-div">
    <p>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
      amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.
    </p>
  </div>
</div>

Вам просто нужно установить ширину image-div и text-div на 100%. Таким образом, они займут 50% ширины экрана.

Затем мы должны установить ширину изображения внутри image-div равной 100%. Таким образом, он займет всю ширину родительского div. То же самое и с текстовым div.

Надеюсь, это поможет

Answer 2

Вам нужно установить максимальную ширину и высоту для вашего изображения следующим образом:

.image-div img {
  max-width: 100%;
  max-height: 100%;
}

Вот пример:

.wrapper
{
  display: flex;
  border: 3px solid red;
}

.image-div
{
  flex: 1;
}

.image-div img {
  max-width: 100%;
  max-height: 100%;
}

.text-div
{
  flex: 1;
}

<div class="wrapper">
  <div class="image-div">
    <img src="https://images.pexels.com/photos/4403924/pexels-photo-4403924.jpeg?cs=srgb&dl=silhouette-of-mountain-under-cloudy-sky-during-sunset-4403924.jpg&fm=jpg">
  </div>
  <div class="text-div">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In           itaque assumenda explicabo blanditiis! Mollitia adipisci            voluptates doloremque porro eaque dolor blanditiis deserunt.          Illum optio ut minus magni nemo ipsum obcaecati.
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. In           itaque assumenda explicabo blanditiis! Mollitia adipisci              voluptates doloremque porro eaque dolor blanditiis deserunt.        Illum optio ut minus magni nemo ipsum obcaecati.</p>
  </div>
</div>

Answer 3

Добавление ширины изображения в CSS устраняет проблему:

.image-div img { width: 100%; }

Answer 4

Установите изображение как position: absolute, растянуто до полного размера его родительского элемента DIV и используйте object-fit, чтобы адаптировать фактическое изображение к желаемому значению, например contain или cover .

При этом изображение будет адаптировано к области , размер которой определяется текстовым содержимым в другом flex: 1 элементе DIV:

.wrapper {
  display: flex;
  border: 3px solid red;
}

.wrapper>* {
  position: relative;
  flex: 1;
}

.image-div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <div class="image-div">
    <img src="//placehold.it/300x400&text=Some+image">
  </div>
  <div class="text-div">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati. Lorem ipsum dolor sit,
      amet consectetur adipisicing elit. In itaque assumenda explicabo blanditiis! Mollitia adipisci voluptates doloremque porro eaque dolor blanditiis deserunt. Illum optio ut minus magni nemo ipsum obcaecati.</p>
  </div>
</div>