Как растянуть img на весь экран монитора?

305
29 октября 2017, 18:34
<div class="bgc">
 <img src="img.jpg" width="1920" height="1000">
</div>

чтобы при масштабировании до любых размеров она всегда занимала 100% монитора, а не при достижении ширины монитора свыше 1920px снизу начинало бы появляться пустое место. Уточняю - картинка находится на html-странице и не нужно ее запускать через css - backgroun-image

Answer 1

как обычно : пользуемся не инлайновыми стилями а в отдельном файле

html,body{ 
height:100%; 
} 
 
img{ 
display:block; 
width:100%; 
height:100%; 
}
<img src="">

но так же надо помнить что изображение должно быть в альбомном виде

Answer 2

Хорошо, если изображение абстрактное и деформация при непропорциональном масштабировании не заметна... Можно, с помощью jQuery скрыть изображение, забрать его src и подложить его в ненавистный вам background-image, и добавить background-size: cover...

Можно попробовать использовать object-fit (https://caniuse.com/#feat=object-fit)

body, html { 
  margin: 0; 
  width: 100vw; 
  height: 100vh; 
} 
img { 
  display: block; 
  width: 100vw; 
  height: 100vh; 
  object-fit: cover; 
}
<img src="http://lorempixel.com/1500/1000/sports/Dummy-Text/" />

READ ALSO
Реализация кнопки

Реализация кнопки

Добрый день! Подскажите, как реализовать такую кнопку:

279
Помощь в отступах и позиционировании

Помощь в отступах и позиционировании

Получается создал 3 пункта меню но не могу правильно задать отступы и спозиционировать элементы списка

263
Помогите пожалуйста составить SQL запрос

Помогите пожалуйста составить SQL запрос

Привет! Прошу вашей помощиЕсть уже select с большим количеством join и с длинным условием where

261
Как подсчитать дни, попадающие в месяц при то, что заданы лишь промежутки? MySQL

Как подсчитать дни, попадающие в месяц при то, что заданы лишь промежутки? MySQL

Дана таблица в MySQL, в которой есть некоторый набор диапазона дат (2 столбца начало и конец)Есть проблема, например, нужно подсчать количество...

179