如何实现当前图片显示在wrap容器外部？

解决方案 #

先修正当前布局的核心错误：.content设置了display: flex但未指定排列方向，默认横向排列会导致文字和按钮挤在一起，先添加flex-direction: column让内容垂直排布。

针对图片溢出容器的需求，两种方案可选，不需要用overflow属性（overflow会裁剪超出内容，和你要的效果相反）：

方案1：用margin偏移实现（简单易上手）

.wrap {
  display: flex;
  align-items: flex-start; /* 让子元素顶部对齐，避免图片被拉伸 */
  width: 690px;
  margin: 5vh auto auto auto;
  background-color: rgb(255, 196, 255);
}
.wrap .content {
  display: flex;
  flex-direction: column; /* 新增：垂直排列内容 */
  max-width: 339px;
  padding: 40px 20px; /* 加内边距，优化内容与容器的间距 */
}
.wrap img {
  width: 364px;
  height: auto;
  margin-top: 80px; /* 调整该值，让图片底部超出容器，匹配参考图效果 */
}

方案2：用position: absolute实现（精准控制位置）

如果需要更精细地调整图片位置，可采用绝对定位，此时要给.wrap加position: relative作为定位父级，同时给.wrap加左侧内边距避免内容被图片遮挡：

.wrap {
  display: flex;
  width: 690px;
  margin: 5vh auto auto auto;
  background-color: rgb(255, 196, 255);
  position: relative; /* 作为绝对定位的父容器 */
  padding-left: 364px; /* 给图片预留宽度，避免内容被遮挡 */
}
.wrap .content {
  display: flex;
  flex-direction: column; /* 新增：垂直排列内容 */
  max-width: 339px;
  padding: 40px 20px; /* 加内边距优化布局 */
}
.wrap img {
  width: 364px;
  height: auto;
  position: absolute;
  left: 0;
  top: 60px; /* 调整该值控制图片垂直位置 */
}

两种方案各有优势：margin方案代码简洁、易维护；absolute方案定位更灵活，适合需要精细调整的场景。

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