我在一個(gè)div中有一個(gè)響應(yīng)的背景圖像。我想在它上面的兩列flex布局，其中左布局有像響應(yīng)圖像一樣的寬度自動(dòng)縮放的父div的高度100%的圖像。右邊部分是在flex中居中的兩行文本。

這是目前為止我能找到的最接近的了。但是flex不會(huì)拉伸以適合背景div圖像，并且當(dāng)瀏覽器調(diào)整大小時(shí)，左側(cè)圖像不會(huì)相應(yīng)地縮放。

注意:px中的寬度和高度都不應(yīng)在代碼中指定

.parent {
  display: flex;
  align-items: center;
}

.left {
  height: 100%;
}

.right {
  flex: 1;
  background: blue;
}

<div style="position: relative;">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
      <div class="parent">
        <div class="left">
          <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
        </div>
        <div class="right">
          <p>
            123
          </p>
          <p>
            456
          </p>
        </div>
      </div>
    </div>
</div>

去除 對(duì)齊-項(xiàng)目:居中； 從父div。

如果要居中對(duì)齊文本元素，請(qǐng)使用填充或位置:相對(duì)/位置:絕對(duì)

然后申請(qǐng) 身高:100%；到圖像。

添加自對(duì)齊:垂直于圖像