如何在 css 中将图像拉伸到屏幕的 50%

Question

我有布局：https://www.behance.net/gallery/99127261/Webcor-Landing-Page-free-psd 第二部分“关于我们”有问题，我创建了 2 div 并将其设为 flex box，尝试设置为 img 50%，但是没用，就像：enter image description here

我怎样才能让它像布局一样？

代码：`

<section class="about" id="about">
            <div class="about__description">
                <div class="desc-left">
                    <img src="./img/about.png" alt="WebCor-about" >
                </div>
                <div class="desc-right">
                    <h2>About us</h2>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id nulla autem maxime, dolore
                        aperiam possimus esse nisi laudantium dolores hic iste! Eligendi, recusandae laboriosam.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, perspiciatis?
                    </p>
                </div>
            </div>
    </section>`

css:

h2 {
    padding-top: 100px;
    padding-bottom: 60px;
    font-size: 3.7em;
}

.about {
    background-color: #e4e4e4;
}

.about__description {
    display: flex;
    justify-content: space-between;
}

.about__description p {
    font-size: 2.1em;
    font-weight: 300;
}

.desc-left {
    display: flex;
    width: 100%;
}

.desc-left img {
    width: 50%;
}

.desc-right {
    width: 50%;
    padding-right: 200px;
    font-weight: bold;
    float: right;
}

Answer 1

试试 width: 50vw; 这意味着视口宽度的 50%。同样适用于高度，然后是 vh.

如何在 css 中将图像拉伸到屏幕的 50%

How to stretch an image to 50% of the screen in css

html

css

layout