我正在尝试调整div的大小并保持其内容的宽高比,但似乎不起作用。
<div class="main-wrapper d-flex">
<div class="horizontal-img-stack">
<div class="col-6">
<div class="row">
<h4>Wall Detection</h4>
<img class="w-100" src="{{ color_image }}">
</div>
</div>
<div class="col-6">
<div class="row">
<h4>Final</h4>
<img class="w-100" src="{{ final_image }}">
</div>
</div>
</div>
CSS:
.main-wrapper{
flex-wrap: wrap-reverse;
height: auto;
}
.horizontal-img-stack {
align-items: center;
display: inline-flex;
}
我尝试了许多建议,但被困了几天。谢谢
答案 0 :(得分:0)
似乎只是根据容器的大小调整每个图像的情况。尝试将其添加到CSS:
.w-100 {
width: 100%;
height: auto;
}