Question

有人可以解释为什么在这种情况下将弯曲方向保持为列很重要吗？当您将其更改为反向行或反向行时，图像的某些部分宽度会缩小

.main {
  width: 100%;
}

.left {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 50%;
}

.text {
  display: flex;
  align-items: center;
}

.text-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.width100 {
  color: #fff;
  text-align: center;
  width: 100%;
}

<div class="main">
  <div class="left">
    <img src="https://via.placeholder.com/350x150">
    <div class="text text-img-overlay">
      <div class="width100">
        <h1>500x320</h1>
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为align-items（辅助轴对齐：方向为行时为Y，方向为列时为X）的默认值是stretch，因此，当您使用flex-direction: column时，图像在X轴上拉伸，但是将其更改为flex-direction: row时，它在Y轴上拉伸（垂直适合，但不是水平）。

您必须为图像定义width: 100%。

Answer 2

我不确定您的意思，因为我没有看到任何区别，但是您没有图片的宽度值，因此这可能会解决您的问题。

img {
width: 100%;
}

弯曲方向属性

2 个答案: