html — Как растянуть img на весь экран монитора?
Вопрос задан
Изменён 5 лет 4 месяца назад
Просмотрен 5k раз
<div> <img src="img.jpg"> </div>
чтобы при масштабировании до любых размеров она всегда занимала 100% монитора, а не при достижении ширины монитора свыше 1920px снизу начинало бы появляться пустое место. Уточняю — картинка находится на html-странице и не нужно ее запускать через css — backgroun-image
- html
- css
1
как обычно : пользуемся не инлайновыми стилями а в отдельном файле
html,body{
height:100%;
}
img{
display:block;
width:100%;
height:100%;
}<img src="">
но так же надо помнить что изображение должно быть в альбомном виде
8
Хорошо, если изображение абстрактное и деформация при непропорциональном масштабировании не заметна.
.. Можно, с помощью 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/" />
2
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Помогите растянуть картинку на весь экран pda — Вопрос от Михаил Коллинс
- Вопросы
- Горячие
- Пользователи
- Вход/Регистрация
>
Категории вопросов
Задать вопрос +
Основное
- Вопросы новичков (16565)
- Платные услуги (2141)
- Вопросы по uKit (82)
Контент-модули
- Интернет-магазин (1437)
- Новости сайта (500)
- Каталоги (809)
- Блог (дневник) (113)
- Объявления (295)
- Фотоальбомы (434)
- Тесты (60)
- Форум (578)
Продвижение сайта
- Монетизация сайта (220)
- Раскрутка сайта (2457)
Управление сайтом
- Работа с аккаунтом (5342)
- Поиск по сайту (427)
- Меню сайта (1767)
- Домен для сайта (1535)
- Дизайн сайта (13481)
- Безопасность сайта (1485)
- Доп.
функции (1308)
Доп. модули
- SEO-модуль (225)
- Опросы (63)
- Гостевая книга (99)
- Пользователи (433)
- Почтовые формы (318)
- Статистика сайта (198)
- Соц. постинг (213)
- Мини-чат (91)
постинг (213)Вебмастеру
- JavaScript и пр. (645)
- PHP и API на uCoz (236)
- SMS сервисы (10)
- Вопросы по Narod. ru (429)
- Софт для вебмастера (39)
ru (429)…
|
В прошлом при изменении размера изображения с помощью функций «Растянуть» или «Заполнить экран» качество изображения могло немного ухудшиться, особенно если объект изображения имел четко очерченные края, которые могли стать слегка зубчатыми. Даже тогда многие фотографии не сильно пострадали, если размер был достаточно близким. В новых компьютерах обычно используется высококачественное программное обеспечение для изменения размера, поэтому изображения, размер которых превышает разрешение вашего экрана, будут выглядеть так же хорошо «сжатыми», как и центрированными. (Однако, если изображение значительно меньше разрешения вашего экрана, нет программного обеспечения, которое растянет его без потери качества.)
Другой способ попасть в эту панель управления — щелкнуть правой кнопкой мыши рабочий стол, выбрать «Персонализация», затем нажать «Фон рабочего стола», который находится в верхней части окна в Vista и внизу в Windows 7. (В любом случае путь это «Пуск» > «Панель управления» > «Оформление и персонализация» > «Персонализация» > «Фон рабочего стола»). , в то время как «Растянуть» изменит пропорции изображения, чтобы заполнить экран без обрезки.
HTML5-video-stretch-fullscreen.css · GitHub
Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode. Узнайте больше о двунаправленных символах Unicode
Показать скрытые символы
css»>
