Html 如何将图像缩放到与段落相同的大小？

如何将图像缩放到与段落相同的大小？

这是我到目前为止的Html和CSS代码

CSS和HTML

。段落作者
{
左侧填充：250px；
宽度：100px；
高度：20px；
}
皮克斯先生
{  
浮球：对
宽度：100px；
高度：20px；
右边填充：250px；
}

“Lorem ipsum Door sit amet，是一位杰出的献身者，他是一位临时顾问

我想你应该试试网格系统。这里是CSS：

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-gap: 10px;
    padding: 30px;
}
  
.grid-container > div {
    text-align: center;
    padding: 30px 0;
    font-size: 30px;
}
  
.item1 {
    grid-column-start: 1;
    grid-column-end: 2;
}

p {
      padding: auto 100px;
}

和HTML：

<div class="grid-container">
    <div class="item1">                
        <p style="font-size: 20px">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt officia autem quas architecto deleniti nisi reiciendis distinctio, nihil necessitatibus! Corporis.</p>
    </div>
    <div class="item2">
        <img src = "coffee.jpg" style="width: 900px; height: 300px">
    </div> 
</div>

Lorem ipsum dolor，是一位杰出的建筑设计师。他必须成为一名优秀的建筑设计师

---

试试这个，我希望你能找到这个有用的

你期望的输出是什么？在你的html代码中，标记的结尾是什么？