如何为:before伪元素的背景图片设置固定尺寸？

• 给.message设置相对定位，用calc计算符合布局要求的最大宽度，同时给左侧预留头像空间：

  .message {
    position: relative;
    max-width: calc(50% - 60px); /* 扣除头像宽度+预留间距，可根据实际需求调整数值 */
    padding-left: 60px; /* 给头像留出位置，比头像宽度多10px做间距更美观 */
    /* 保留你原有的margin、上下padding等样式 */
  }
  

• 给:before伪元素设置固定宽高，用绝对定位脱离内容流，同时控制背景图不拉伸：

  .message:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    background-image: url('default-avatar.png');
    background-size: cover; /* 保持图片比例，超出部分裁剪，适合头像类图片 */
    background-position: center;
    /* 如果需要圆形头像，可添加：border-radius: 50%; */
  }
  

• 原理：绝对定位的伪元素不受.message的内容宽度影响，固定宽高直接锁死头像尺寸；.message的padding-left给头像腾地方，max-width用calc把头像占的空间从50%里扣除，既保证消息框在左侧不超半宽，又彻底解决头像变形问题。

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