Блог

Главная - Вопросы по программированию - Как заполнить изображение на 100% высоте родительского элемента и сохранить соотношение (ширина: высота изображения)?

Как заполнить изображение на 100% высоте родительского элемента и сохранить соотношение (ширина: высота изображения)?

#html #css #twitter-bootstrap

#HTML #css #twitter-bootstrap

Вопрос:

Песочница кода: https://codesandbox.io/s/polished-browser-d5qrr?file=/index.html:0-1902amp;fbclid=IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH-4UB8QIbPdb_hZKL1G0

Как заполнить изображение на 100% высоты родительского элемента? Соотношение ширина: высота должно оставаться неизменным.

Комментарии:

1. оберните изображение в div. дайте div атрибут object-fit: contain; , установив ширину на auto, а высоту на фиксированное значение. затем изображение будет соответствовать заданной высоте и автоматически регулировать ширину для поддержания соотношения.

Ответ №1:

Вот возможное решение вашего вопроса, я надеюсь, что это может помочь

 <!DOCTYPE HTML>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />

<style>
    html,
    body {
        height: 100%;
    }

    .custom-container {
        position: relative;
        max-width: 800px;
        max-height: 400px;
        width: 70%;
        height: 60%;
        border: 2px solid red;
    }

    .mid {
        border: 2px solid green;
    }

    .flex-grow-1 {
        position: relative;
        min-height: 100px;
        max-height: 100%;
    }

    .img-container {
        position: relative;
        height: 100%;
    }

    .flex-grow-1,
    .img-container,
    img {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }

    div>img {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        min-height: 100%;
        min-width: 100%;
        transform: translate(-50%, -50%);
    }
</style>
<title>Document</title>
</head>

<body>
<div class="custom-container d-flex flex-column">
    <div class="top">
        <h1>Nadpis</h1>
    </div>
    <div class="mid flex-grow-1">
        <div class="img-container">
            <img src="https://external-content.duckduckgo.com/iu/?u=http://html.com/wp-content/uploads/very-large-flamingo.jpgamp;f=1amp;nofb=1"
                alt="img" />
        </div>
    </div>
    <div class="bottom">
        <button class="btn btn-primary">Dalej</button>
    </div>
</div>
<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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
 </body>

</html>

Ответ №2:

Вы хотите, чтобы img заполнял высоту своего контейнера, который имеет class .img-container .

На данный момент вы установили ширину и высоту элемента img на 100 пикселей. Это дает небольшое изображение, которое может быть искажено, если оригинал не квадратный.

Чтобы изображение заполнило всю высоту, но сохранило исходное соотношение сторон, замените настройки CSS .img-container img на:

 .img-container img {
    height: 100%;
    width: auto;
}

Это может быть не то, что вы хотите, если, например, некоторые из ваших изображений более альбомные, чем портретные. В зависимости от соотношения сторон изображения по сравнению с контейнером, изображение может быть обрезано по бокам.

Если вы хотите убедиться, что вы всегда показываете точно все изображение, тогда исследуйте object-fit: contain , может ли это дать вам пустое пространство сверху и снизу или по бокам, если соотношения не совпадают.

Если вы хотите всегда заполнять контейнер, но без искажения изображения, тогда исследуйте object-fit: cover . Это отрежет верх и низ или стороны, если это необходимо. Вам также нужно будет посмотреть на позиционирование, часто центр будет делать то, что необходимо, но может работать не для всех ваших изображений.

Ответ №3:

Это правильный ответ

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    
    <style>
        html,body{
            height: 100%;
        }
        .custom-container{
            max-width:800px;
            max-height:400px;
            width:70%;
            height:60%;
            border: 2px solid red;
        }  
        .mid{
            border:2px solid green;
            min-height:0;
        }
        img{
            max-height:100%;
            max-width: 100%;;
        }

        #problem{
            background-color: red;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="custom-container d-flex flex-column">
        <div class="top">
            <h1>Nadpis</h1>
        </div>
        <div class="mid flex-grow-1 d-flex">
            <div id="problem" class="w-100" >
                <img src="https://external-content.duckduckgo.com/iu/?u=http://html.com/wp-content/uploads/very-large-flamingo.jpgamp;f=1amp;nofb=1" alt="img">
            </div>
        </div>
        <div class="bottom">
            <button class="btn btn-primary">Dalej</button>
        </div>
    </div>
    <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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>

Комментарии:

1. Не могли бы вы добавить некоторые пояснения, чтобы мы могли узнать, как это работает. Это было бы полезно для людей, которые придут сюда позже с аналогичной, хотя и не совсем такой же проблемой.