html图片自动调整div大小

Posted 2023-02-25

【中文标题】html图片自动调整div大小

【英文标题】：html image auto adjust size of div

【发布时间】：2015-05-19 17:00:44

【问题描述】：

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

此外，当只有 2 个复选框时，我希望火车那么小。 （所以我只想让图像适应复选框的长度。

代码是：

<div id="axle_bogie_border">
    <!--This is the train image-->
            <img src="Images/axle_train.png" >
        <!--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>

还有 CSS：

#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;

显示轴 div 还没有内容。

这是它现在的外观示例：

如您所见，火车在一定长度后不会继续行驶。

【参考方案1】：

我认为您应该将火车图像分割成引擎和车厢图像，然后将车厢图像定义为带有背景重复：重复-x 的#axle_bogie_border 的背景图像。 http://www.w3schools.com/cs-s-ref/pr_background-repeat.asp

也许这有帮助：CSS multiple Background Images both repeat-x

【讨论】：

我来看看！ :)