Html 我的div元素占用的空间比需要的多。我怎样才能摆脱那个空间？

我正在尝试将图片居中，并将文本与其左边缘对齐

我在想最好的办法是用

宽度：fit content

创建一个div。 然而，这里有一些有趣的事情，我得到了，但无法解决。

这是我的密码：

HTML代码：

<div class="container">
            <div class="row">
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/12.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
                <div class="column">
                    <div id="imageContainer">
                        <img id="imgWidth" src="{%  static 'kuzaneli/img/New folder/li.png' %}" alt="..."/>
                        <div id="imageText"><div> Jacqueline Mon Amour </div><div> 25.00 Eur </div></div>
                    </div>
                </div>
            </div>
</div>

---

我想去掉div中的额外空间，在这里我有图像和文本。我该怎么做呢？

相反，您可以制作内容以填满可用空间。 在这种情况下，让图像填充所有可用空间

#imgWidth{
    width: 100%;
    height: auto;
}

使用引导时，最好使用它的类来布局文档。在下面的代码中，我发布了我使用的html和css。在html标记中，我使用引导类使img标记“响应”，并对齐文本和图像。以下来自引导文档的链接可能会有所帮助：

我认为有必要提及的是，如果您在代码中使用了大量图像，最好使它们的大小相似。例如，它们都有168px的宽度和300px的高度。因为如果它们有不同的尺寸，你的布局可能会有一些问题

在css代码中，我根据图像大小添加了一个“max width=168px”，您可以将其更改为任何图像宽度

.imageContainer{
边框：2px实心#258221；
最大宽度：168px；
}

中心img
Jacqueline Mon Amour 25.00欧元
Jacqueline Mon Amour 25.00欧元

这是密码

Jacqueline Mon Amour 25.00欧元
Jacqueline Mon Amour 25.00欧元

是的，但我希望自己是个小人物。在这种情况下，有没有办法从外部元素中减小它们的大小？我如何才能使列变小？我所有的照片都是固定大小的，所以我没有问题。我只需要它们看起来不太大，是否有可能制作一个比图片更小的列，并用图片填充它。为了更好地显示，我添加了“col-sm”类。如果你不需要，你只可以删除它们，并且只在你的布局中使用“.imageContainer”div。这个答案并没有完全解决我的问题，但是它给了我足够的信息来修复它。我改变了你的代码，添加了一些填充物，最终缩小了尺寸。

#imgWidth{
    width: 100%;
    height: auto;
}