Question

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

这是我的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 {
    
}

谢谢！

Answer 1

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

您可以绝对使用此代码，但是此div之后放置的内容将显示在图片下方

还有另一种方法，您可以将其称为背景图片

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

如果要在图像上方显示下一个内容，请将其设置为背景图像。

Answer 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>

Answer 3

通常，这应该可以工作：

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

如果您使用 height：100％; ，它将填充该部分，但不会保持宽高比。

Answer 4

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

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

如何使我的图像一直伸展？

4 个答案: