如何在包含多张图片的div中实现单张图片的横向局部拉伸

实现方案 #

你需要的三图拼接（左右固定宽度、中间自适应拉伸、无间隙）可以通过flex布局实现，具体修改如下：

第一步：修正HTML代码 #

<div id="flag-header">
  <img src="images/flag_header/flag_header_normal.png" alt="左侧头部图" height="100">
  <img src="images/flag_header/flag_header_middle.png" alt="中间拉伸图" height="100">
  <img src="images/flag_header/flag_header_opposite.png" alt="右侧头部图" height="100">
</div>

说明：img为自闭合标签，不需要单独写结束标签，补充alt属性符合无障碍规范，注意删除属性间多余的无效格式

第二步：添加对应CSS样式 #

#flag-header {
  width: 100%;
  display: flex;
  align-items: center;
}
#flag-header img {
  display: block;
  object-fit: cover;
}
#flag-header img:nth-child(2) {
  flex-grow: 1;
  width: 0;
}

说明：flex布局会自动消除行内元素默认的空白间隙，左右两侧图片会维持原始宽度，中间图片自动占满剩余横向空间，整体宽度随浏览器窗口自适应调整。如果不需要保持中间图比例，可以把object-fit属性值改为fill

低版本浏览器兼容方案 #

如果需要兼容不支持flex的旧浏览器，可以改用如下方案：

#flag-header {
  width: 100%;
  height: 100px;
  font-size: 0;
}
#flag-header img {
  display: inline-block;
  height: 100px;
}
#flag-header img:nth-child(2) {
  /* 把括号内的占位替换为你左右两张图的实际宽度数值 */
  width: calc(100% - [左侧图宽度]px - [右侧图宽度]px);
}

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