如何在父級的 100% 高度填充圖像並保存比例（寬度：圖像的高度）？

Question

代碼沙箱： https : //codesandbox.io/s/polished-browser-d5qrr? file =/ index.html: 0-1902& fbclid = IwAR3LXPTNfumRyitqed-xzOJHEeq5PBTuLnU-V0LH- 4UB8QIbPdb_hZKL1G0

如何將圖像填充到父 div 的 100% 高度？ 比例寬度：高度應保持不變。

Answer 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%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&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>

Answer 2

您希望 img 填充其具有類 .img-container 的容器的高度。

目前您已將 img 元素的寬度和高度設置為 100px。 這給出了一個小圖像，如果原始圖像不是方形的，它可能會失真。

要使圖像充滿整個高度但保持其原始縱橫比，請將 .img-container img CSS 設置替換為：

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

例如，如果您的某些圖像更像是橫向而不是縱向，這可能不是您想要的。 根據與容器相比的圖像縱橫比，您可能會在側面截斷圖像。

如果您想確保始終准確顯示整個圖像，請調查object-fit: contain如果比例不匹配，這可能會給您頂部和底部或兩側的空白區域。

如果您想始終填充容器，但沒有圖像失真，請調查object-fit: cover 。 如果需要，這將切斷頂部和底部或側面。 您還需要查看定位，通常 center 會做需要的事情，但可能不適用於您的所有圖像。

Answer 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%3A%2F%2Fhtml.com%2Fwp-content%2Fuploads%2Fvery-large-flamingo.jpg&f=1&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>

如何在父級的 100% 高度填充圖像並保存比例（寬度：圖像的高度）？

問題描述

3 個解決方案

解決方案1
0 2020-11-10 16:42:14

解決方案2
0 2020-11-10 16:46:08

解決方案3
0 已采納 2020-11-10 17:08:16

如何在父級的 100% 高度填充圖像並保存比例（寬度：圖像的高度）？

問題描述

3 個解決方案

解決方案1 0 2020-11-10 16:42:14

解決方案2 0 2020-11-10 16:46:08

解決方案3 0 已采納 2020-11-10 17:08:16

解決方案1
0 2020-11-10 16:42:14

解決方案2
0 2020-11-10 16:46:08

解決方案3
0 已采納 2020-11-10 17:08:16