Java图像弯曲处理_适合高度100％弯曲的图像

首先，我尝试将图像 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;

}

123

456

请注意，如果要匹配保留的“背景”图像，则当前标记将不起作用 - 因为这意味着约束父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;

}

123

456