Растянуть <img>по всему экрану без сохранения соотношения сторон и без полос прокрутки - PullRequest
Новая
       38

Растянуть <img>по всему экрану без сохранения соотношения сторон и без полос прокрутки

0 голосов
/ 07 февраля 2020

Я пытаюсь растянуть изображение в теге image, чтобы оно помещалось на весь экран независимо от соотношения сторон. Например, я хочу, чтобы он умещался на весь экран как на экране 16: 9, так и на экране 21: 9. Я попробовал следующие css, а также size: 100% 100%; Ни одна из них не сработала, по бокам окна браузера есть полосы прокрутки. Я хочу добиться этого: http://nemesisvisuals.com.
Как вы можете видеть, фоновое изображение (я специально использую тег image, поэтому хочу получить те же результаты, но с тегом image) растягивается, чтобы соответствовать экрану, несмотря ни на что. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>
    <body>
        <img src="img.jpg">
    </body>
</html>

1 Ответ

1 голос
/ 07 февраля 2020

Ты почти у цели: 

* {
  margin: 0;
  padding: 0
}

img {
  display: block;
  height: 100vh;
  width: 100vw;
}
<img src="https://picsum.photos/1280/720">
...