如何使图像从右侧 50% 覆盖整个窗口答案

【问题标题】：How to make an image cover full window from 50% to the right如何使图像从右侧 50% 覆盖整个窗口
【发布时间】：2021-02-14 06:28:45
【问题描述】：

任何人都可以请帮助我解决我的问题吗？我正在使用 bootsrap 4，我必须找到解决这种情况的方法：我有一个元素位于标准的六列中。然而，第二个元素占据了整个页面的宽度，我必须将它们彼此相邻放置。我附上了一张设计图片，以了解它应该是什么样子。请帮帮我，我很绝望。

谢谢你，卢卡斯

【问题讨论】：

这个答案对你有用吗？

标签： html css image bootstrap-4 grid

【解决方案1】：

如果您为所有img 标签设置max-width: 100%;，请为您提供的图片的后六列中的图像使用max-width: none，如果您在此图像中使用.img-fluid 类，请将其删除，@ 987654325@ 类的 CSS 为 max-width: 100%; 全屏查看演示。

演示

body {overflow-x: hidden}
img {max-width: none;}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row align-items-center">
        <div class="col-sm-6">
            <h2>
                Lorem ipsum dolor sit amet consectetur adipisicing.
            </h2>
        </div>
        <div class="col-sm-6">
            <img src="https://dummyimage.com/1200x600/74bdcc/fff.jpg" alt="">
        </div>
    </div>
</div>

如果图像是 sized 或 layered 对于该特定尺寸，则使用此选项，如果不是，则对该图像使用 width: 50vw;，请参见下面的示例-

img {width: 50vw}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-sm-6">
                <h2>
                    Lorem ipsum dolor sit amet consectetur adipisicing.
                </h2>
            </div>
            <div class="col-sm-6">
                <img src="https://dummyimage.com/1200x600/74bdcc/fff.jpg" alt="">
            </div>
        </div>
    </div>

【讨论】：