如何在时间线文本框(text-box)中实现全响应式图片？

要实现text-box内图片的全响应式展示，只需修改CSS样式，移除固定宽高并添加自适应规则：

修改后的CSS代码 #

.text-box img {
    /* 移除固定宽高，让图片自适应容器 */
    width: 100%;
    height: auto;
    border-radius: 1%;
    /* 确保图片不会超出容器宽度 */
    max-width: 100%;
    /* 可选：保持图片比例并填充容器，避免拉伸变形 */
    object-fit: cover;
}

关键说明 #

• width: 100%：让图片宽度铺满父容器text-box的可用空间
• height: auto：保持图片原有宽高比例，避免拉伸变形
• max-width: 100%：确保图片在任何屏幕尺寸下都不会超出容器边界
• object-fit: cover（可选）：如果需要图片填充容器且裁剪多余部分以保持视觉完整性，可添加此属性；若希望完整显示图片，可改为object-fit: contain

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