时间戳

首页 > 解决方案 > 如何在css中将图像拉伸到屏幕的50%

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

问题描述

我有布局：https ://www.behance.net/gallery/99127261/Webcor-Landing-Page-free-psd 第二部分“关于我们”有问题，我创建了 2 个 div 并将其设置为弹性框，尝试过设置为 img 50%，但无用，就像：在此处输入图像描述

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

代码：`

<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;
}

标签： htmlcsslayout

解决方案

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

推荐阅读