如何防止 flex-basis 调整项目图像的大小？答案

【问题标题】：How to prevent flex-basis resize item image?如何防止 flex-basis 调整项目图像的大小？
【发布时间】：2022-11-30 23:17:54
【问题描述】：

由于html markup，我不得不使用flex-basis来改进样式，以便p元素从与title/headline相同的列开始，并且使用flex-basis解决了问题。
但是正如您在屏幕截图中看到的那样，图像占用了太多的高度和宽度。
我尝试使用max-height 和max-width 修复它，但它打破了我的风格。
我的目标是删除该空间，以便我可以控制content 和button 之间的空间。

笔记: 我不能使用css grid。我知道，这会更容易，但是在使用css grid 的 ios 上存在问题。

这是the sandbox link和下面的代码sn-p

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: grey;
  column-gap: 15px;
  padding: 20px;
}

.content {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.logo-image {
  flex-basis: 100%;
  object-fit: contain;
  object-position: top;
  padding-top: 10px;
  order: 1;
  align-self: flex-start;
}

.headline {
  color: white;
  order: 2;
  padding-left: 10px;
}

.text {
  color: white;
  font-size: 16px;
  margin-bottom: 20px;
  order: 3;
}

.btn {
  display: flex;
  width: 100%;
}

button {
  align-items: center;
  background-color: black;
  color: white;
  flex: 0 0 90%;
  justify-content: center;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

<div class="container">
      <div class="content">
        <h4 class="headline">
          Block Title
        </h4>
        <img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
          aliquid sit, cupiditate
        </p>
      </div>
      <div class="btn">
        <button>link</button>
      </div>
    </div>

]3和代码

【问题讨论】：

标签： html css flexbox

【解决方案1】：

你不能制作图像position:absolute所以你不需要flex-box

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: grey;
  column-gap: 15px;
  padding: 20px;
}

.content {
  position: relative;
  padding-left: 4rem;
}

.logo-image {
  position: absolute;
  left: 0;
  top: 0;
}

.headline {
  color: white;
  order: 2;
  margin:0 0 0.5rem;
}

.text {
  color: white;
  font-size: 16px;
  margin:0 0 10px;
  order: 3;
}

.btn {
  display: flex;
  width: 100%;
}

button {
  align-items: center;
  background-color: black;
  color: white;
  flex: 0 0 90%;
  justify-content: center;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="content">
        <h4 class="headline">
          Block Title
        </h4>
        <img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
        <p class="text">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente
          aliquid sit, cupiditate
        </p>
      </div>
      <div class="btn">
        <button>link</button>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

首先，删除 .logo-image 上的 flex-basis。

然后将h4.headline 和你的img 放在自己的.wrapper 中，并向其中添加display: flex;。然后只需设置img { max-width: 100%;)，以便您的图像在容器中适当调整大小。

.container {
  display: flex;
  flex-wrap: wrap;
  background-color: grey;
  column-gap: 15px;
  padding: 20px;
}

.content {
  display: flex;
}

.logo-image {
  object-fit: contain;
  object-position: top;
  padding-top: 10px;
  align-self: flex-start;
}

.headline {
  color: white;
  padding-left: 10px;
}

.text {
  color: white;
  font-size: 16px;
  padding-left: 10px;
}

.btn {
  display: flex;
  width: 100%;
}

button {
  align-items: center;
  background-color: black;
  color: white;
  flex: 0 0 90%;
  justify-content: center;
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="style.css" />
  <title>Static Template</title>
</head>

<body>
  <div class="container">
    <div class="content">
      <img src="https://i.stack.imgur.com/Pm2og.png" width="50px" class="logo-image" alt="img" />
      <div class="wrapper">
        <h4 class="headline">
          Block Title
        </h4>
        <div>
          <p class="text">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente aliquid sit, cupiditate
          </p>
        </div>
      </div>
    </div>
    <div class="btn">
      <button>link</button>
    </div>
  </div>
</body>

</html>

【讨论】：

感谢你的回答。但正如我提到的，问题是，p 元素应该从作为标题的列开始。但在这里它就在图像下方开始。但应该像我的屏幕截图一样只删除图像中出现的空间。提前致谢
@Greg 没问题，请参阅编辑。