调整大小时如何制作响应式图像长宽比和高度

问题描述

我有两栏。一种用于图像，另一种用于文本和具有固定高度的按钮。对于自适应图像，我将width设置为100％，将height设置为auto。调整大小时，它会保持宽高比，但与第二列的高度不匹配。

如果将图像高度设置为100％，则它与第二列保持相同的高度，但不保持图像的纵横比。任何建议请！

在移动视图中没有问题，最大宽度为567px。我在PC视图中需要帮助。

.btn {
    width: 100px;
}
.explain {
    height: 250px;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZonixN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body class="bg-light">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 p-0">
                <img src="https://www.petittrain-quiberon.com/files/tao/img/demo/background-1.jpg" class="w-100" >
            </div>
            <div class="col-md-6 bg-dark text-white p-0">
                <div class="py-5 px-3 explain">Lump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump Lump</div>
                <div class="py-5 px-3">
                    <div class="row m-0">
                        <div class="btn btn-primary col-md-5">Ok</div>
                        <div class="btn btn-secondary col-md-5 offset-md-2">Cancel</div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</body>

解决方法

对不起，内联样式，但这应该可以正常工作。我认为您应该为此目的切换到背景图片。您需要为“行”设置固定高度，然后才能将“ col”设置为其父级的100％高度。

.btn {
    width: 100px;
}
.explain {
    height: 250px;
}

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body class="bg-light">

    <div class="container-fluid">
        <div class="row" style="height: 400px;">
            <div class="col-md-6 p-0" style="height: 100%;">
                <div style="height: 100%; width: auto;background-image: url(https://www.petittrain-quiberon.com/files/tao/img/demo/background-1.jpg);background-size:cover;"> </div>
            </div>
            <div class="col-md-6 bg-dark text-white p-0">
                <div class="py-5 px-3 explain">Lump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump Lump</div>
                <div class="py-5 px-3">
                    <div class="row m-0">
                        <div class="btn btn-primary col-md-5">Ok</div>
                        <div class="btn btn-secondary col-md-5 offset-md-2">Cancel</div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</body>

html responsive-design