如何將影像放入非靜態大小的div中？-有解無憂

如何在非靜態大小 div 中擬合大小由 % 定義的影像？這是我此刻所做的，對照片進行了評論，以向您展示布局看起來像我想要的樣子，如果您取消評論照片，整個布局將被破壞。我希望所有單元都是相同型別或相似的，并且只需找到在不破壞整個布局的情況下將這張照片放入 div 的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == WHOLE PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem, ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
                <!--<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="如何將影像放入非靜態大小的 div 中？">-->
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

uj5u.com熱心網友回復：

要覆寫頁面的整個寬度，請使用（在此示例中object-fit，影像高度指定為任意單位。em

該答案沒有object-fit，而是使用影像作為背景。當影像只是“裝飾性”時可以使用它——你不能alt在上面放文字等。

兩種變體都以非常相似的方式使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == WHOLE PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem, ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png" alt="circle" style="object-fit: cover; height: 10em; width: 100%">
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

uj5u.com熱心網友回復：

您可能希望使用 CSS 將影像作為背景插入，而不是使用影像標簽。然后您可以將background-size屬性設定為適當的值，例如containor cover。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body{
            width: 100%;
            height: 100vh;
        }

        /* == WHOLE PAGE ==*/
        .landing{
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column; 
        }

        /* HEADER */
        .header{
            background: #F582A7;
            flex: 0 1 10%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .header > ul{
            display: flex;
            flex-direction: row;
            list-style: none;
        }

        .header > ul > li{
            padding: 0 10px 0 10px;
        }

        /* CONTENT */
        .mainContent{
            background: #F10086;
            flex: 1 1 auto;
            display: flex;
            flex-flow: column-reverse;
        }

        .bottomContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .topContent{
            width: 100%;
            height: 50%;
            flex: 1 1 50%;
            background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Vector-based_example.svg/1024px-Vector-based_example.svg.png');
            background-repeat: no-repeat;
            background-size: contain;
        }

        .topContent > img{
            max-height: 100%;
            max-width: 100%;
        }

        /* TABS */
        .tabs{
            background: #711A75;
            flex: 0 1 18%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab{
            height: 80%;
            width: 30%;
            background: #180A0A;
            border-radius: 15px;
        }
    </style>
</head>
<body>
    <div class="landing">
        <div class="header">
            <ul>
                <li>Test 0</li>
                <li>Test 0</li>
                <li>Test 0</li>
            </ul>
        </div>
        <div class="mainContent">
            <div class="bottomContent">
                <h1>Lorem, ipsum dolor.</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum recusandae rem dolorum consectetur repellendus molestiae amet quo reprehenderit possimus eaque.</p>
            </div>
            <div class="topContent">
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/447393.html

標籤：html css 网络

上一篇：有沒有可以使用Flask顯示沒有HTML標簽的SVG的解決方案？[復制]

下一篇：更改我的GitHub用戶名會使托管在GitHubPages上的網站無法訪問嗎？