Safari图片变形、缩放挤压及图片设为链接后样式异常问题咨询

1. Safari浏览器图片变形 #

Safari对flex容器下元素的宽高计算规则与Chrome存在兼容性差异，你给img同时设置了全局样式height: 90vh和行内样式height: auto，样式优先级冲突未被Safari正确识别，同时缺少图片比例约束规则，导致图片被拉伸变形。

2. 窗口调整时图片挤压变形 #

你未给img设置object-fit比例约束属性，视口尺寸变化时图片容器被挤压后，图片无法保持原比例缩放；给图片包裹a标签后，flex容器的直接子元素从img变为a标签，你未给a标签设置对应的flex尺寸规则，导致a标签被挤压后内部图片随之变形。

3. 图片包裹a标签后样式异常、链接失效 #

• 样式异常：flex容器的直接子元素为flex item，原flex尺寸规则仅设置给了img，包裹a标签后a作为新的flex item没有对应尺寸约束，且a默认是行内元素，自带基线偏移等默认样式，导致样式错乱。
• 链接失效：样式错乱可能导致a标签的可点击区域被压缩，或存在其他元素z-index高于a标签、全局样式给a设置了pointer-events: none规则，都会导致点击无响应。

步骤1：修改CSS代码 #

替换原CSS为以下内容：

.container {
  display: flex;
  flex-wrap: nowrap; /* 修正原代码拼写错误no-wrap为nowrap */
  overflow-x: auto;
  height: 90vh;
  gap: 50px; /* 替代原img的margin规则，避免边距折叠问题 */
}
/* 给包裹图片的a标签设置flex子项规则 */
.container a {
  flex: 0 0 auto;
  height: 90vh;
  display: block;
}
/* 统一图片样式 */
.container img {
  height: 100%;
  width: auto;
  object-fit: contain; /* 强制保持图片原始比例，不会出现变形 */
  display: block; /* 消除img默认的底部空白 */
}

步骤2：修改HTML代码 #

删除所有img标签上的行内样式style="max-width:100%;height:auto;"，避免和全局样式出现优先级冲突。

步骤3：链接失效补充排查 #

如果修改完样式后链接仍无法点击，检查是否存在其他元素的z-index值高于a标签，或全局样式中存在a {pointer-events: none;}这类规则，删除对应限制即可。

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