能否使用css实现背景图片上半部分不变，拉伸下半部分填满容器？

Question

需求描述

红框部分是父容器，图片就像图中那样，能保证都是这样的图片比例，而且所有的图片都是像这样上面是人或景，下半部分是纯色。

想通过CSS保证图片不变形的情况下，只拉伸图片的纯色部分填充满整个父容器，有办法做到吗

限制

1. UI提供的图片就是这样，无法通过他们裁剪的方式拉长图片
2. 不使用父容器填充纯色背景，然后图片放上去这种方式

Answer 1

没办法一张图，需要将下部分纯色的截取一点出来
然后将截取的图，放到下方url中，相当于两个div拼接

背景图片铺满全屏，记得加个斜杠

background: url() no-repeat center / cover

Answer 2

可以是可以，就是会比较蠢，最好的是现实是让UI切两张图然后拉伸底色，或者说直接填充颜色。
并不是通过拉伸， object-fit 属性没有你想要的效果。

实现的思路是两个 <img> 组件，上层是正常的图，下层是挂底的的图片。这样叠加在一起的。

---

哦，原来是背景图啊，那么就更简单了。

Answer 3

说实话你们这个ui挺不错的 比我们的强太多

Answer 4

感觉这不是 CSS 能解决的通用问题，需要根据不同的图片来使用不同的解决方案。

除非你的所有图片都是类似的结构。

不然的话我觉得还是交给设计师处理一下为好。

Answer 5

想到一个办法，避免极端问题，既然图片是后台配置的，那可以在后台配置一个纯色背景图，再配合陟上晴明大佬方式，简单又不出错

Answer 6

可以利用border-image的特性切割成9部分，让纯色内容自动拉伸。

关键在于如下的代码：

border-image-slice: 400 50% 10 50% fill;

top取400，bottom取10（可根据图片实际情况设置），然后中间部分的纯色就会自动去做拉伸了

注意项

• 保证好每张图片的纯色区域都一致即可