Как настроить соотношение сторон и высоты изображения при изменении размера

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

У меня есть два столбца. Одно для изображения, а другое для текста и кнопок с фиксированной высотой. Для адаптивного изображения я устанавливаю ширину 100% и высоту автоматически. При изменении размера сохраняется соотношение сторон, но оно не совпадает с высотой второго столбца.

Если я установлю высоту изображения равной 100%, это сохранит ту же высоту со вторым столбцом, но не сохранит соотношение сторон изображения. Пожалуйста, любой совет!

в мобильном режиме просмотра проблем нет, максимальная ширина: 567 пикселей. Мне нужна помощь в представлении на ПК..

 .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>

1. Вы пробовали использовать object-fit в img?

2. Да, я пытался, но это не решает..

3. При изменении размера изменяется ширина обоих столбцов. Если ширина изменяется, но высота остается неизменной, то изменяется соотношение сторон. object fit: cover решает обе ваши проблемы, нет?

Ответ №1:

Извините за встроенные стили, но это должно работать так, как ожидалось. Я думаю, для этой цели вам следует переключиться на фоновое изображение. Вам нужно установить фиксированную высоту для «строки», а затем вы можете установить «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/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>