Css картинка на весь экран: Как растянуть картинку на весь экран css?

А ваши картинки крадут время?

Загружать большое изображение на мобильный телефон пользователя = проявить к нему неуважение. Как решить проблему неуместных картинок на вашем сайте.

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

В далеком (далеком ли?) прошлом для мобильных сайтов разрабатывалась отдельная, мобильная, версия.

Сейчас все чаще отдается предпочтение адаптивным или отзывчивым интерфейсам.

Действительно круто создать одну разметку и написать стили один раз, предусмотрев все нужные разрешения.

В этой прекрасной сказке есть один отрицательный герой — картинки.

Предположим, на вашем чудесном сайте есть hero image — большой и красивый баннер, привлекающий к себе взгляды посетителей. На компьютере сайт грузится быстро, баннер выполняет свою продающую роль, интерфейс выглядит отлично.

Чтобы картинка адаптировалась под разные экраны вы делаете что-то вроде:

Вес нашей картинки 110 КБ, размеры картинки — 960х539. Она восхитительно смотрится.

Но что произойдет, если ваш сайт открыть, например, на телефоне? Через мобильный интернет? В области?

Чтобы загрузить эту картинку через 3G в Питере, потребуется 3,34 сек. Три с половиной секунды только на картинку, Карл! Спросите себя, а нужен ли вам реальный размер этой картинки на маленьком экране телефона? Отвечу за вас — конечно нет.

Если вам кажется, что это всего несколько секунд и это мелочи, то вспомните, сколько всего на вашей странице помимо картинки: текст, скрипты, реклама, счетчики слежения.

Показать только нужное

Есть кардинальный вариант — вообще не показывать на мобильном устройстве эту картинку.

Есть отличный тест Тафта, который поможет определить, действительно ли важна эта картинка для контента сайта.

Делаем просто:

C первого взгляда проблема решена. Вы даже ощутите, что страница загружается быстрее, если откроете ее на мобильном телефоне. Это происходит за счет того, что браузер экономит время на отрисовке картинки.

Но тут вас будет ждать огромное разочарование — картинка по прежнему скачивается, безжалостно пожирая трафик пользователя.

На фоне

Еще один вариант манипуляций предполагает, что картинка у нас будет фоном элемента. Тогда при помощи тех же медиа-запросов мы можем вообще не загружать ее или подменять на более легкий вариант.

Браузер загрузит только ту картинку, которая предусмотрена для текущего разрешения.

Profit!

Но вы потратите довольно много времени на то, чтобы подменять картинки на каждом разрешении. Ваш CSS слегка вспухнет. А рано или поздно кто-то забьет на это (от лени или по незнанию) и на мобильных снова полезут увесистые картинки.

И я уже молчу про вариант, когда действительно нужен , а background вам не подойдет.

Решабельно

В нынешней спецификации HTML есть отличное решение нашей с вами проблемы. Умные люди пишут эти спецификации!

Я настаиваю на вашем знакомстве с Отзывчивыми изображениями.

Отзывчивое изображение — загружается только та версия картинки, которая подходит по размеру области, экрана и DPI.

Вся эта магия реализуется при помощи дополнительных атрибутов к тегу img.

Так выглядит основной синтаксис, обеспечивающий вам отзывчивые изображения:

При помощи разных манипуляций с этой формулой мы можем обеспечить себе не только облегчение от груза картинок, но и:

• Качественные картинки на ретине.
• Показ подходящего формата в зависимости от знаний браузера.

Живой пример

Примечание: Codepen не очень дружит с отзывчивыми картинками. Аналогичные примеры http://responsiveimages.org/demos/variable-width/index.html и https://googlechrome.github.io/samples/picture-element/

В приведенном примере картинка занимает 700px при ширине экрана больше 700px и 100% ширины при меньших разрешениях.

При этом, если вы откроете этот пример на мобильном телефоне, то браузер загрузит меньшую из версий картинки.  

Вы можете видеть, что адреса картинок указаны в ранее не используемом атрибуте srcset. У этого атрибута следующий синтаксис: srcset=“URL-картинки размер-в-w, URL-картинки размер-в-w”. И так нужное количество раз.

Дальше пишем еще один новый атрибут — sizes. Он содержит в себе информацию о том, сколько места занимает картинка на том или ином разрешении. Для брейкпоинтов используется обычное медиа-выражение. Синтаксис: sizes:”брейкпоинт размер-в-px/vw”. Вы можете перечислить нужное количество брейкпоинтов и задать для каждого размер отображаемой картинки. Можно указать одно значение, например, 100vw. Тогда картинка будет всегда на 100% ширины экрана.

Злоупотребление картинками

Делаем следующее:

1. Открываем Chrome в режиме инкогнито.
2. Открываем Инструменты разработчика (DevTools).
3. Переходим на вкладку Network, нажимаем Img.
4. Заходим на наш сайт и видим внизу результат.

Заключение

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

Честно скажу, что у меня не было цели написать пошаговую инструкцию. Я поставила себе задачу привлечь ваше внимание к проблеме неуважительного отношения к трафику и времени пользователей. И дала вам подсказки, в какую сторону стоит посмотреть.

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

• Проведите тест Тафта.
• Проверьте финальную скорость загрузки.
• Оптимизируйте изображение (крошечная панда).
• Используйте новые атрибуты для img.

Пишите в комментарии, какие темы вас интересуют и я обязательно напишу о них в следующих статьях.

Полезные ссылки:

• Получаем разные разрешения одной картинки РАЗ и ДВА.
• Читаем документацию: раз, два, три.
• Изучаем мануалы: первый, второй, третий.
• Проверяем поддержку в браузерах.

Оцените статью

Средняя оценка 0 / 5. Всего проголосовало 0

html — фоновое изображение не на весь экран

спросил 8 лет, 10 месяцев назад

Изменено 6 лет, 10 месяцев назад

Просмотрено 10 тысяч раз

Я создаю веб-сайт с прокруткой вниз на одну страницу, где каждый слайд представляет собой страницу.

 #seven {background:url(../img/camara_view.JPG) исправлено нижнее отсутствие повторения; }
 

Вот распечатка: http://postimg.org/image/489mxfagt/

Есть решения?

• html
• css
• изображение
• фон
• пробел

1

Вы можете использовать свойство background-scale:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Если вы поддерживаете современные браузеры, вы можете сделать следующее.

 #семь {
    background-size: обложка /* содержит */ /* ширина в px/em/rem, т.е. 50rem 20rem */
}
 

Кроме того, вы можете поместить свое изображение в тег

с использованием фонового изображения css

 html {
      фон: url(images/bg.jpg) фиксированный центр без повторов;
      -webkit-background-size: обложка;
      -moz-background-size: обложка;
      -o-background-size: обложка;
      размер фона: обложка;
    }
 

, иначе вы можете попробовать другой способ, приведенный ниже, код отлично работает с ie7

код CSS

 #bg {
положение: фиксированное;
сверху: -50%;
слева: -50%;
ширина: 200%;
высота: 200%;
}
 #бг изображение {
положение: абсолютное;
вверху: 25%; слева: 25%;
справа: 25%; внизу: 25%;
поля:авто;
минимальная ширина: 50%;
минимальная высота: 50%;}
 

HTML-код

 

   png" alt="">

 

Просто добавьте .bgwidth { width: 100%; } .bgheight { высота: 100%; }

это устранит проблему

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Почему я не могу отобразить изображение на весь экран в формате html?

спросил 1 год, 8 месяцев назад

Изменено 1 год, 8 месяцев назад

Просмотрено 813 раз

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

внутри фонового div, он отображается, но только его часть.

Фрагмент HTML и CSS:

 .bg{
  фон: url(file:///D:/Dev/gamer/img/bg_1.jpg) исправлен центр без повторов;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
} 

 <тело>
  <дел>
      
случайный текст
      
случайный текст
      
случайный текст