如何让在一个div内实现上面部分放图片下面部分的放多行文字，并且文字部分和图片部分宽度一致

可以使用 flexbox 布局来实现这个效果。具体实现步骤如下：

1. 父元素设置为 flex 容器，并且设置 flex-direction 为 column，这样子元素会按照垂直方向排列。

2. 图片元素设置为 flex-shrink: 0，这样图片不会被压缩。

3. 文字部分设置为 flex-grow: 1，让它占据剩余的空间。

4. 父元素和子元素都设置为 box-sizing: border-box，这样 padding 和 border 不会影响宽度计算。

最终代码如下：

<div class="container">
  <img src="your-image-url" alt="your-image-description">
  <div class="text">多行文字</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

img {
  flex-shrink: 0;
  width: 100%;
  height: auto;
}

.text {
  flex-grow: 1;
  padding: 10px;
  box-sizing: border-box;
}
</style>

通过设置图片的宽度为 100% 和高度为 auto，可以保持图片宽度与父元素一致，同时保持图片的比例不变。文字部分设置 padding 和 box-sizing，可以让它和图片部分宽度一致。