Javascript 整个图像不会显示在网页的标题部分

我有一张图片，我正试图在网页的标题部分看到它。但是，只显示了部分图像，我希望看到整个图像

这是显示图像的代码

<div class="container">
    <div class="row" >
        <div class="col-sm-12" style="background: url('image1.jpg'); color: white;">
            <center>
                <h1>Sonic Train</h1>
            </center>
            <center>Train machine learning models at Sonic speed...</center>
        </div>
    </div>

音速列车
以音速训练机器学习模型。。。

它可以在行动中看到

整个图像如下所示，但是，仅看到图像的一部分

---

您可以使用css

height

属性来增加div高度，如注释中提到的@Rory McCrossan div小于图像的div，例如：

---

希望这有帮助。

图像是

div的背景，div的高度小于图像的高度。我不确定您还期望发生什么？您可以查看一下，但这不会调整
div的高度，也不会使用最小高度：500px；
<div class="col-sm-12" style="background:url('image1.jpg');color:white; height: 500px;">