Question

我试图复制您在此处看到的图像使用情况：https://medium.com/backchannel/the-gentleman-who-made-scholar-d71289d9a82d

我的问题是我使用Wordpress而且我不能像在Medium.com上那样拆分不同DIV中的内容

所以，我需要一种方法来制作一个在a，700px宽DIV范围内扩展整个屏幕宽度的图像。

这是一个代码示例：

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Untitled</title>
        <link rel="stylesheet" href="style.css">
        <link rel="author" href="humans.txt">
    </head>
    <body>

        <div class="main">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reprehenderit eligendi eaque facere vitae, illum amet quasi dolores neque optio tenetur dignissimos, alias nulla repudiandae iste ex numquam atque.
            </p>


            <img class="full" src='1.jpg' />

            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam officia reprehenderit eligendi eaque facere vitae, illum amet quasi dolores neque optio tenetur dignissimos, alias nulla repudiandae iste ex numquam atque.
            </p>
        </div>                
    </body>
</html>

CSS：

body {
    background-color: beige;
    margin: 0;
    padding:0;
}


.main {
    width: 900px;
    margin: auto;
    background-color: #555555;
}

.full {
    width: 100%;
}

有没有办法可以让图像将宽度拉伸到整个屏幕而不会将其从DIV的文本流中取出？

到目前为止，我尝试了许多事情并没有取得任何成果:(

Answer 1

如果您只使用现代浏览器，则可以使用the vw unit：

vw unit 等于初始包含块宽度的1/100。

.full {
    width: 100vw;
}

Answer 2

如果你在主css类中添加position：absolute它会起作用。但我不知道它是否适合你的特定要求

.main {
    position: absolute;
    width: 100%;
    margin: auto;
    background-color: #555555;
}

你也可以通过提供图像和顶部填充的绝对位置来实现它

.full {
    padding-top:50px;
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

在div中制作img会将其宽度拉伸到整个屏幕

2 个答案: