复选框的数量可以扩展到大约 40 个。如果发生这种情况,滚动条会起作用,您可以向右滚动。 但我希望图像也能自行调整到该长度。 所以现在如果我向右滚动图像会自动停止。
此外,当只有 2 个复选框时,我希望火车变得那么小。 (所以我只想让图像适应复选框的长度。
代码是:
<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>
还有 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;
}
show axles div 还没有内容。
这是它现在的样子的一个例子:
如您所见,火车在一定长度后不会继续行驶。
最佳答案
我认为您应该将火车图像分割成引擎图像和车厢图像,然后将车厢图像定义为#axle_bogie_border 的背景图像和background-repeat:repeat-x。 http://www.w3schools.com/cssref/pr_background-repeat.asp
关于php - html图片自动调整div的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29096164/