对图像使用 Flexbox

Question

我是一名初级 Web 开发人员，最近开始使用 Flexbox。 我发现它是一个很好的工具，但是我有一个小问题。

我有一张图片要放在我的网站上，右侧旁边有一列文字。 正如您从下面的代码中看到的那样，我创建了一个包装器 div，其中包含两个嵌套的 div。

我已在包装 div 中将 display 属性设置为“flex”，并将内部两个 div 的 flex 属性设置为“1”。我认为这会使我的两个 div 分别占用 50% 的空间，但看起来图像占用的空间超出了应有的空间。

我使用了来自 Pexels 的示例图片。我想知道原始图像的实际大小是否对此有影响？例如，我是否必须在将所有照片放在网站上之前手动调整它们的大小，或者有没有办法让图像始终占据 50% 的宽度，而让文本占据另外 50%，使用弹性盒子？

抱歉，如果这篇文章难以理解。感谢您的帮助！

.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

在 CSS 中添加图像宽度可以解决问题：

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

Answer 3

您需要像这样为图像设置最大宽度和高度：

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

将您的图像设置为position: absolute，拉伸到其父DIV元素的全部范围，并使用object-fit将实际图像调整为所需的值，例如contain或@987654324 @。

这样做，图像将适应区域，该区域的大小由另一个 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>