Css изображение на весь экран: Как сделать картинку фоном в HTML и CSS. 3 простых способа

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

Вопрос задан 5 лет 1 месяц назад

Изменён 5 лет 1 месяц назад

Просмотрен 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

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как сделать чтобы при небольшом разрешении экрана боковая картинка превращалась в картинку на весь экран — Вопрос от Toto Shka

• org/Breadcrumb»> Вопросы
• Дизайн сайта
• Как сделать чтобы при…

Здравствуйте. Работаю над улучшением адаптивности дизайна сайта. Отдельной мобильной версии у него нет, но зато страницы сайта вроде бы неплохо подогнаны под мобильники. Однако недавно я решил вставлять в статьи небольшую боковую картинку вверху.

Пример на скриншоте

Проблема в том, что хотя эта картинка имеет не фиксированные размеры, она плохо адаптируется под мобильники, так как при уменьшении экрана она сама тоже просто уменьшается в размере и остается с правой стороны от текста.

А мне нужно, чтобы на экране мобильника эта картинка расширялась на весь экран НАД текстом. 

Несколько лет назад я покупал на юкозе один шаблон, где эта идея была отлично организована. Вот тут можно глянуть на их демо-сайте https://newsportals.ucoz.net/news/tolstoj_poprosit_mehriju_proverit_fakty_sobranij_zhilcov_po_renovacii/2017-07-16-31

Я пытался взять код той картинки и поставить его на свой сайт.  Но у меня почему-то никак не получается чтобы при маленьком экране картинка становилась так как мне надо. Не могу понять что я упускаю, вероятно нужные еще какие-то дополнительные коды в CSS или в шаблоне страницы?

Вот те коды для боковой картинки, которые я «трансплантировал» на свой сайт.

 
<div>
<span>$ADD_DATE$</span>
<img alt=»$ENTRY_NAME$ — $OTHER3$» src=»<?if($IMG_URL1$)?>$IMG_URL1$<?else?>/img/noimage.png<?endif?>» alt=»» />
 </div>

. h-mtr-full {float:left;width:46%;margin-right:30px;margin-bottom:10px;position:relative}
.h-mtr-full img {width:100%}

.h-se-date {display:inline-block;position:absolute;top:0px;left:0px;color:#fff;text-align:center;padding:4px 12px;font-size:11px;line-height:24px;background:#8fbf83;}

• css-стили
• дизайн
• стили

11.06.2021 | Автор: Toto Shka | Категория: Дизайн сайта

Голоса: +1

ng-image-fullscreen-view — npm

Полноэкранный просмотрщик изображений с поддержкой Angular. Также поддерживаются URL-адреса видео YouTube и mp4.

(совместимо с версией Angular: 11)

Функции!

• Ответный
• захватывает свайпы с телефонов и планшетов
• Совместим с универсальным Angular
• захватывает событие клавиши со стрелкой «следующая/предыдущая» для перемещения изображения в лайтбоксе
• Поддерживаемые изображения (jpeg, jpg, gif, png и Base64-String), URL-адрес Youtube и видео в формате MP4 (url-адрес и Base64-String)

Рабочая демонстрация: https://angular-bkosu5.stackblitz.io/

Пример кода: https://stackblitz.com/edit/angular-bkosu5

npm install ng-image-fullscreen-view

Модуль импорта в ваш app.module.ts :

 import { NgImageFullscreenViewModule} из 'ng-image'-fullscreen-view;
...
@NgModule({
    декларации: [
        AppComponent
    ],
    импорт: [
        NgImageFullscreenViewModule,
        ...
    ],
    провайдеры: [],
    начальная загрузка: [AppComponent]
})
экспортный класс AppModule {
} 

Добавьте компонент в файл шаблона:

   jpg" (click)="showLightbox(0)" />
 

Добавьте условия closeEventHanler и showFlag в your.component.ts :

 export class AppComponent {
    showFlag: логическое значение = ложь;
    выбранныйИндексИзображения: число = -1;
    конструктор () {}
    ...
    показать лайтбокс (индекс) {
        this.selectedImageIndex = индекс;
        this.showFlag = истина;
    }
    закрытьEventHandler() {
        this.showFlag = ложь;
        this.currentIndex = -1;
    }
    ...
} 

Формат ImageObject

 imageObject: Array