如何让我的图像一直拉伸？答案

【问题标题】：How to Make my Image Stretch All the Way?如何让我的图像一直拉伸？
【发布时间】：2018-09-06 11:58:39
【问题描述】：

我正在设计我网站的主页；我希望图像（见下图）一直延伸到标题下方。有什么办法可以做到吗？

这是我的 index.pug 文件代码：

extends _component/layout/layout

block super-config
    -
        var active = '/'

block awesome-content
    .img
        img(src="/asset/image/pink-computer.jpg")

这是我的 style.scss 文件代码：

.img {
    
}

谢谢！

【问题讨论】：

你想要图片作为背景吗？
是的，我愿意。我是否将其设置为背景图像？
是的...在这里学习：w3schools.com/cssref/pr_background-image.asp
见这里例子：jsfiddle.net/ejy5ngLz/2

标签： html css image sass pug

【解决方案1】：

    img{
        width:  100%;
        height: 100%;
    }

这段代码你绝对可以用，但是你放在这个div后面的内容会出现在图片下方

还有一种方法，可以叫作背景图片

  img{
        background-image:  example.jpg;
        background-size: cover;
    }

如果您希望下一个内容出现在图像的上方，则将其设置为背景图像。

【讨论】：

【解决方案2】：

试试这个，这个应该可以正常工作：

<!DOCTYPE HTML>
<html>
    <body>

        <div id="wrapper">
            <img src="https://i.ytimg.com/vi/bBmWWvJquGM/maxresdefault.jpg" />
        </div>

        <style>
        #wrapper, img{
            width:  100%;
            height: 100%;
        }
        </style>
    </body>
</html>

【讨论】：

谢谢你，@basha！

【解决方案3】：

通常，这个应该可以工作：

.img {
  width:100%;
  height:auto;
}

如果您使用 height:100%;，它将填充该部分，但不会保持纵横比。

【讨论】：

【解决方案4】：

我找到了另一个解决方法，就是说：

.img-photo {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-image: url(/asset/image/pink-computer.jpg);
}

【讨论】：