Как сделать так, чтобы мой образ растянулся до конца? - PullRequest
Новая
       23

Как сделать так, чтобы мой образ растянулся до конца?

0 голосов
/ 06 сентября 2018

Я оформляю домашнюю страницу моего сайта;Я хочу, чтобы изображение (см. Фото ниже) растянулось полностью под заголовком.Есть ли способ, которым я могу это сделать?

Вот мой код файла 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 {
    
}

Спасибо!

My website's home page

Ответы [ 4 ]

0 голосов
/ 06 сентября 2018

Я нашел другое исправление, которое должно было сказать: 

.img-photo {
    height: 100vh;
    background-size: cover;
    background-position: center center;
    background-image: url(/asset/image/pink-computer.jpg);
}
0 голосов
/ 06 сентября 2018

Обычно этот должен работать: 

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

если вы используете height: 100%; заполнит раздел, но не сохранит соотношение сторон.

0 голосов
/ 06 сентября 2018 
    img{
        width:  100%;
        height: 100%;
    }

Вы можете использовать этот код абсолютно, но контент, который вы размещаете после этого div, появится под изображением

Существует также другой метод, который можно назвать как background-image 

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

Если вы хотите, чтобы следующий контент отображался на изображении выше, установите его как background-image.

0 голосов
/ 06 сентября 2018

Попробуйте, это должно работать правильно: 

<!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>
...