时间戳

首页 > 解决方案 > 如何将图像从容器“拉伸”到屏幕右侧？

html - 如何将图像从容器“拉伸”到屏幕右侧？

问题描述

我尝试将图像标签放置在绝对顶部 0 右 0 的包装器中。但在这种情况下，图像包装器从父框出来。那么你有什么想法吗？还有什么更好的选择：img-tag 或带有背景图像的 div？ 最终结果如图

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}
.about__left, .about__right {
    width: 50%;
}
.about-wrapper {
    display: flex;
    align-items: center;
    position: relative;
}
.about__left-text {
    width: 85%;
    line-height: 35px;
}
.about__left-title {
    margin-bottom: 40px;
}
.about__right {
    position: absolute;
    top: 0;
    right: 0;
    /* width: 950px;
    height: 600px;
    background-image: url('../images/about__pic.png');
    background-size: cover;
    background-repeat: no-repeat; */
}
.about__right-pic {
    /* position: absolute;
    top: 0;
    right: 0; */
}
<div class="about mb180">
            <div class="container about-wrapper">
                <div class="about__left">
                    <h2 class="about__left-title title">О нас</h2>
                    <p class="about__left-text text">Командор - официальный дистрибьютор и эксклюзивный представитель международной марки Komandor в России. 25 лет на рынке, представительства в более, чем 11 странах мира, в России работает более 400 торговых точек и 40 сертифицированных производств</p>
                </div>
                
                <div class="about__right">
                    <img class="about__right-pic" src="images/about__pic.png" alt="pic">
                </div>
            </div>
        </div>

标签： htmlcss

解决方案

添加overflow:hidden;到 .container 并查看。

.container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    overflow:hidden;
}

或者添加这个新的 css 规则；

.about__right-pic,
.about__right img{
    width:100%;
    height:auto;
}

推荐阅读