Flutter中Container内图片拉伸问题：如何实现无拉伸适配？

你当前的问题根源在BoxFit.fill属性上——它会强制图片填满Container的宽高，完全忽略图片原始比例，这就是导致拉伸变形的原因。

要让图片保持原始比例适配Container，替换BoxFit属性即可，以下是两种常用方案：

方案1：使用BoxFit.cover #

该属性会让图片保持原始比例，以最短边为基准填满整个Container，超出部分会被裁剪，确保容器完全被图片覆盖，不会留白。适合需要图片撑满容器、允许裁剪边缘内容的场景。

修改后的代码：

Container(
  height: 350,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.all(Radius.circular(25)),
    boxShadow: const [BoxShadow(color: Color.fromRGBO(104, 104, 104, 0.2), offset: Offset(0, 1), spreadRadius: 5, blurRadius: 10)],
    image: DecorationImage(
      image: getImage(imageId: 123).image,
      fit: BoxFit.cover, // 替换原有的BoxFit.fill
    ),
  ),
),

方案2：使用BoxFit.contain #

该属性会完整展示整张图片，按原始比例缩放至刚好能放入Container内，容器剩余区域会留白。适合需要完整呈现图片、不允许裁剪的场景，可搭配alignment: Alignment.center让图片居中显示。

修改后的代码：

Container(
  height: 350,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.all(Radius.circular(25)),
    boxShadow: const [BoxShadow(color: Color.fromRGBO(104, 104, 104, 0.2), offset: Offset(0, 1), spreadRadius: 5, blurRadius: 10)],
    image: DecorationImage(
      image: getImage(imageId: 123).image,
      fit: BoxFit.contain, // 替换原有的BoxFit.fill
      alignment: Alignment.center, // 可选配置，让图片居中
    ),
  ),
),

额外说明：如果Container有固定宽度，两种方案都能很好地保持图片比例；若宽度为自适应，BoxFit.cover依然能保证容器被填满，BoxFit.contain则会根据图片比例调整容器实际宽度（前提是Container未强制限制宽度）。

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