如何用CSS border-image调整底部边框图像显示，使内部图片不居中？

要实现海报在电视边框内上移、适配屏幕区域的效果，不用额外容器，只修改.tv类的CSS就能搞定，具体方案如下：

.tv {
  height: 170px;
  /* 上下border宽度分开设置，底部留足支架空间 */
  border: 9px solid transparent;
  border-bottom-width: 25px;
  /* 分别设置border-image-slice的四个值，区分屏幕和支架区域 */
  border-image: url("https://i.sstatic.net/xyxRN.png") 15 15 30 15 stretch;
  /* 让海报向上对齐，填充电视屏幕部分 */
  object-position: top;
  /* 可选：保证图片适配屏幕比例，避免变形 */
  object-fit: cover;
}

关键调整说明： #

1. 拆分border上下宽度：把底部border宽度设为更大的25px，专门给电视支架预留空间，避免支架被过度拉伸变形。
2. 自定义border-image-slice值：原来的单值15会让上下切片区域一致，现在改成15 15 30 15（上、右、下、左），底部切片设为30，让border-image正确识别支架的独立区域，不会和电视屏幕部分混淆。
3. 用object-position控制图片位置：作为替换元素，img可以通过object-position: top直接让内部海报向上对齐，刚好填满电视的屏幕区域，解决居中导致的位置偏移问题。

为什么之前的尝试没生效： #

• 单独加border-bottom:20px只调整了border宽度，但没同步修改slice值，导致支架区域的切片逻辑错误，只会拉伸支架部分。
• round/stretch只是控制border-image的平铺方式，无法影响内部图片的对齐位置。
• border-image-outset是让border-image向外延伸，和内部图片的位置调整无关。
• 之前的单值border-image-slice没有区分电视屏幕和支架的不同切片区域，无法适配两者的结构差异。

内容的提问来源于stack exchange，提问作者Betule Sairafi