调整大小时如何使响应式图像纵横比和高度答案

【问题标题】：How to make responsive image aspect ration and height when resizing调整大小时如何使响应式图像纵横比和高度
【发布时间】：2020-08-15 17:19:42
【问题描述】：

我有两列。一种用于图像，另一种是具有固定高度的文本和按钮。对于响应式图像，我设置 width 100% 和 height auto 。调整大小时，它保持纵横比，但与第二列高度不匹配。

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

它在移动视图中没有问题可能是 max-width:567px。我需要电脑视图方面的帮助..

.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/popper.js@1.16.1/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>

【问题讨论】：

你试过在img上使用object-fit吗？
是的，我试过了，但没有解决..
调整大小时，两列的宽度都会发生变化。如果宽度发生变化但高度保持不变，则纵横比会发生变化。 object fit: cover 解决了你的两个问题，不是吗？

标签： html css responsive-design

【解决方案1】：

对不起，内联样式，但这应该可以按预期工作。我认为您应该为此切换到背景图像。您需要为“行”设置固定高度，然后您可以将“列”设置为其父级的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/popper.js@1.16.1/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>

【讨论】：

感谢您的回答。但我想要纵横比...