首页 文章

适合高度100％弯曲的图像

提问于
浏览 次
3

我在div中有响应的背景图像 . 我想在它上面有一个两列的flex布局，其中左侧布局的图像高度为父div的100％，宽度为自动缩放，如响应式图像 . 右边的部分是以flex为中心的两行文本 .

这是我到目前为止最接近的 . 但是，flex不会拉伸以适合背景div图像，并且左侧图像在浏览器调整大小时不会相应缩放 .

Note: None of the width and height in px should be specified in the code

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

期望：
enter image description here

html css image css3 flexbox

2 回答

  • 0

    从 parent div中删除 align-items: center; .

    如果要居中对齐文本元素，请使用 padding 或 position: relative/position: absolute

    然后将 height: 100%; 应用于图像 .

    回复于
  • 0

    首先，我尝试将图像 aspect-ratio 保留在 flexbox 的响应式设置中：

    • 从 parent 元素中删除 align-items: center （以便计算默认的 stretch ） .

    • 将 flex: 1 添加到 left 元素 .

    • 将 display: block 添加到 left img 元素，以删除图像下面的 inline 图像的特征空间（也可以将其执行到背景 img ） . 同时给 width: 100% 匹配响应宽度 .

    • 现在包装 right 的内容并将其 absolute 相对于 right flex项目定位 - 这允许 right 元素高度的高度由 left img 确定 .

    • 要对齐右侧部分的内容，请使用另一个这样的弹性框：

    .right .right-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

    见下面的演示：

    .parent {
  display: flex;
}
.left {
  height: 100%;
  flex:1;
}
.left img {
  display: block;
  width: 100%;
}
.right {
  flex: 1;
  background: blue;
  position: relative;
}
.right .right-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

    <div style="height: 60px; background: yellow;">
  <div style="position: relative;">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%; display: block;">
    <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">
          <div class="right-inner">
          <p>
            123
          </p>
          <p>
            456
          </p>
            </div>
        </div>
      </div>
    </div>

  </div>

</div>

    请注意，如果要匹配保留的“背景”图像，则当前标记将不起作用 - 因为这意味着约束父Flexbox的高度，使其高度为：100％ . 但这意味着左侧img的长宽比会在某些时候受到干扰 .

    所以我建议您使用 background-image 属性，如下所示：

    .parent {
  display: flex;
  background-image: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ');
  background-repeat: no-repeat;
  background-size: cover;
}
.left {
  height: 100%;
  flex: 1;
}
.left img {
  display: block;
  width: 100%;
}
.right {
  flex: 1;
  position: relative;
}
.right .right-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

    <div style="height: 60px; background: yellow;">
  <div style="position: relative;">
    <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">
          <div class="right-inner">
            <p>
              123
            </p>
            <p>
              456
            </p>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>
    回复于

相关问题