如何适应非静态尺寸 div 的图像？

Question

如何在非静态尺寸 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="circle">-->
            </div>
        </div>
        <div class="tabs">
            <div class="tab"></div>
            <div class="tab"></div>
            <div class="tab"></div>
        </div>
    </div>
</body>
</html>

Answer 1

与其使用图片标签，不如使用 CSS 插入图片作为背景。然后你可以 set the background-size property 到合适的东西，比如 contain 或 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>

Answer 2

要覆盖页面的整个宽度，请使用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>

如何适应非静态尺寸 div 的图像？

How to fit a image in non-static size div?

html

css

web