Php html图像自动调整div的大小

复选框的数量可以扩展到40个左右。如果出现这种情况，滚动条会工作，您可以向右滚动。 但我希望图像也能调整到这个长度。 所以现在如果我向右滚动，图像会自动停止

另外，当只有两个复选框时，我希望列车是那么的小。（因此，我只希望图像调整到复选框的长度

代码是：

<div id="axle_bogie_border">
    <!--This is the train image-->
            <img src="Images/axle_train.png" alt="train">
        <!--The show axles are the number of checkboxes (Filled in by a user)-->
        <div id="show_axles">
            <?php  
                $_POST['number_of_axles'];
                    if(isset($_POST['number_of_axles'])){
                    for($i=0; $i<$_POST['number_of_axles']; $i++){
                        echo "Axle " . "$i " . "<input type='checkbox' name='axles[$i]'>";
                    }   
                }
            ?>
        </div>
    </div>

节目组还没有内容

下面是它现在的外观示例：

---

正如您所见，列车在一定长度后不会继续运行。

我认为您应该将列车图像分割为一个引擎和一个车厢图像，然后将车厢图像定义为#车轴(转向架)边界的背景图像，背景重复：重复-x。

---

也许这有帮助：

我来看看！：）

#axle_bogie_border {
    border: 2px solid black;
    width: 98%;
    height: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    display: inline-block;
}

#axle_bogie_border img {
    width: 100%;
    height: 200px;
}