Question

CodeSandbox： 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。如果需要的话，这将切断顶部和底部或侧面。您还需要查看定位，通常居中会执行所需的操作，但可能不适用于所有图像。

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 个答案: