移动浏览器中图片相对宽度为何显示为零？

2026-11-06数据小许

结论

从现有代码无法确定图片变成零宽度的具体原因。可以先检查两处可能影响移动端布局的设置：页面没有声明移动端 viewport；.fasciaSx 和 .fasciaDx 使用了 flex: 15% 和 flex: 85%，同时继承了 div { padding: 6px }。这些设置会影响 Flexbox 项目的实际尺寸。HTML 和 CSS 校验通过，只能说明语法符合校验规则，不能保证布局在不同视口下都符合预期。

先声明移动端 viewport

页面的 <head> 中没有 viewport 元标签。移动浏览器可能会使用较宽的布局视口排版，再缩放页面。可以先添加：

<meta name="viewport" content="width=device-width, initial-scale=1">

这能让布局视口匹配设备宽度，但未必能单独解决图片宽度为零的问题。

明确 Flexbox 列宽和图片尺寸

flex: 15% 和 flex: 85% 是 flex 简写写法，不代表固定列宽，项目仍会按照 Flexbox 规则伸缩。两个项目的基础比例合计为 100%，div 的 6px 内边距还会增加项目占用的空间。可以明确列宽、禁止左栏收缩，并用 box-sizing 统一尺寸计算：

* {
  box-sizing: border-box;
}

.contenitore {
  display: flex;
}

.fasciaSx {
  flex: 0 0 15%;
  min-width: 0;
}

.fasciaDx {
  flex: 1 1 85%;
  min-width: 0;
}

.fasciaSx img {
  display: block;
  width: 100%;
  height: auto;
}

如果右侧内容在窄屏上挤占左栏空间，可以把小屏布局改为上下排列。具体断点应根据页面实际效果确定：

@media (max-width: 600px) {
  .contenitore {
    flex-direction: column;
  }

  .fasciaSx,
  .fasciaDx {
    flex: 0 0 auto;
    width: 100%;
  }
}

仍异常时的检查顺序

在开发者工具的移动端模拟视口中，查看 .fasciaSx 的计算宽度，以及图片的 naturalWidth 和 getBoundingClientRect().width。如果父级宽度正常、图片宽度为零，再确认移动设备能否加载 ../fritzing/ilReostatoEILedRuotato.png，并检查是否有其他媒体查询或样式覆盖图片宽度。现有材料没有提供完整页面环境或移动端计算样式，因此无法确认具体原因。