Как сделать чтобы изображение уменьшалось вместе с экраном css

Масштабирование картинок

Если для элемента не задать атрибуты width и height , то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.

Изменение масштаба и пропорций изображения делается как через атрибуты , так и через стили.

Использование атрибутов

Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.

Пример 1. Размеры в пикселях

В примере использовалась одна и та же фотография, для первого размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).

Рис. 1. Размеры фотографии

Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.

Пример 2. Размеры в процентах

В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого отступ слева нам не нужен, поэтому его убираем через свойство margin-left . Результат данного примера показан на рис. 2.

Рис. 2. Масштабирование фотографий

Масштабирование через стили

Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height . Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента .

Пример 3. Размеры через стили

figure img < width: 100%; /* Ширина в процентах */ >

Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width , то стили имеют приоритет выше.

Интерполяция

Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.

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

Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering . К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.

Пример 4. Изменение алгоритма интерполяции

Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.

Рис. 3. Вид картинок после увеличения масштаба

Вписывание картинки в область

Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).

Пример 5. Использование overflow

Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.

Рис. 4. Фотография внутри области заданных размеров

Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover , оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.

Пример 6. Использование object-fit

figure < width: 100%; /* Ширина области */ height: 400px; /* Высота области */ margin: 0; /* Обнуляем отступы */ >figure img < width: 100%; /* Ширина изображений */ height: 100%; /* Высота изображении */ object-fit: cover; /* Вписываем фотографию в область */ >

См. также

• object-fit
• Атрибуты элементов
• Выравнивание картинок
• Добавление медиа-контента
• Изображения
• Изображения
• Изображения в HTML
• Подрисуночная подпись
• Фон в CSS
• Форматы графических файлов

Картинка или видео по размеру экрана на CSS

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

style="max-width: 100%; height: auto;"/>

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

 
текст далее

 .min-p:before 
текст далее

Фон по размеру экрана

С помощью свойства CSS background-size задаётся размер фонового рисунка для элемента HTML, в моём случае это textarea, а значит вы сможете изменить его габариты самостоятельно, потянув за треугольник в Mozille, Google Chrome и Safari. Проценты рассчитываются относительно занимаемого блока; contain, cover и auto сохраняют пропорции фото. ▼ по ширине по высоте по меньшей стороне по большей стороне всё пространство в единицах

textarea < display: block; background: #fff5d7 url(http://4.bp.blogspot.com/-Nq5KPM8uNjk/UFbSS3v0Z5I/AAAAAAAADNQ/3MxRKB-jfqo/s1600/parovozik.jpg) no-repeat;background-size: 100% auto; background-size: auto 100%; background-size: contain; background-size: cover; background-size: 100% 100%; background-size: 200px 154px; background-size: auto; width: 100%; height: 500px; >

Видео по ширине окна браузера

Для видео создаётся отдельная коробка div, которая имеет высоту относительно ширины родителя div, второй элемент с помощью абсолютного позиционирования занимает всё доступное пространство div (подробнее [alistapart.com]).

 .video < width: 100%; position: relative; padding-top: 56.25%; >.video iframe, .video object, .video embed 
 

Сохранение пропорций блока div при изменении размера окна

В примере выше div будет масштабироваться согласно соотношения сторон, так как проценты у padding-top и padding-bottom рассчитываются относительно ширины родителя, а не его высоты. Например, с padding-top 25% блок будет пропорционален 4:1, с padding-top 50% — 2:1.

Для того, чтобы такой блок был ограничен определённой высотой и шириной:

 .video < position: relative; max-height: 100px; max-width: 400px; /* не обязательно блок должен быть ограничен тем же соотношением сторон, что указано в :before, но тогда следует с помощью overflow: hidden; обрезать всё, что выходит за обозначенные рамки */ > .video:before < content: ""; display: block; padding-top: 25%; /* 25% рассчитывается относительно ширины .video. Чтобы рассчитать процентное соотношение сторон можно воспользоваться конвертером ниже */ > .video div

Изменить размеры YouTube по щелчку мышки

Реализация для картинок показана в предыдущей статье. Теперь для YouTube.

15 25 35 45

 .YouTube .YouTube input .YouTube label .YouTube label:hover, .YouTube input:checked + label .YouTube input:nth-of-type(1):checked ~ div .YouTube input:nth-of-type(2):checked ~ div .YouTube input:nth-of-type(3):checked ~ div .YouTube input:nth-of-type(4):checked ~ div .YouTube > div < margin: 0 auto; -moz-transition: 1s; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;>.YouTube > div > div < padding-bottom: 56.25%; position: relative;>.YouTube iframe 
200 300 400 500 
 
 
 
 

31 комментарий:

Космо Мизраил Горыныч NMitra, в хромиуме (у меня Яндекс.интернет) ютуб работает также, как и в мазилке. И у обоих загрузилось со второго раза х_х

Рекламный баннер занимает много места. А так реагирует правильно. Евгения В Хроме всё отлично работает) NMitra Спасибо за помощь! Алексей Куликов Здравствуйте!
Этот код только для Bloger?
Что-то на WP он у меня отображается мягко говоря не корректно! Может ему моя тема не подходит!?

Но ,все равно, спасибо за материал! NMitra Здравствуйте, это универсальный код. Возможно у вас в шаблоне уже упоминаются данные классы. Попробуйте заменить «video» и «YouTube» на какой-нибудь «video202» и «YouTube202». Алексей Куликов Очень жаль. Привлекательная подача видео и экономия пространства.

Не помогает добавление цифр в коде (переименование YouTube). И самое прикольное, что после добавления кода и обновления, видео в админке показывается корректно. а на странице перекошено. где-то код конфликтует. NMitra Так сложно сказать. Возможно есть вложение в div с display: table-cell; или display: inline-block;. Или скрипты, ограничивающие IFRAME. Евгений Бикмаев В последнее время у меня в посты блога и на страницы перестали добавляться картинки. При создании поста картинка добавляется, а после публикации в блог пост уже открывается без картинки. То же самое и с видеороликами. При открытии поста для редакции картинки нет уже и в самом поле для внесения текста поста. Это происходит уже достаточное время, и я не знаю в чём дело. Иногда даже из-за наличия картинок не сохраняется и весь пост, и в блоге открывается только заголовок. Раньше всё было нормально. Некоторое время назад то же самое было с функцией «Читать полностью», но теперь она, как видите, перестала исчезать,

а с картинками не знаю что и делать NMitra Смотрю на статью от 14 июня, картинка присутствует. Евгений Бикмаев Спасибо за отклик, я уже решил проблему. Может, вам пригодится: дело в браузере, мне через некоторое время в самом Блоггере написали, что теперь он не поддерживает Эксплорер, загрузите хром. Я загрузил в Хроме. Но потом и на Эксплорере все наладилось.
Гадко всё-таки, да? Не хотите использовать наш браузер? А на другом не пойдёт наш Блоггер))) NMitra Мда. Гугл официально заявил, что использует и разрабатывает свои проекты только под последние версии браузеров, типа они более надёжны, но чтобы так! В этом году Microsoft (bing) отвоевал часть пользователей из поиска Google. С помощью Хрома Гугол оттяпал пользователей у Яндекса (реклама на TV была исключительно о браузере, поскольку качество поиска отстаёт — языковые особенности). Словом это не наша война.

В целом с переходом на новый интерфейс много ошибок повылазило. С другой стороны, много чего внедряют, например, сейчас я вижу новую микроразметку для вновь созданных блогов. Slava Спасибо за инфу Pani Prijatnaja Что значит Блоггер не поддерживал Эксплорер. Быть такого не может. Вам просто предложили загрузить хром и правильно сделали. IE очень капризный к коду шаблона, остается таким до сих пор. Вечно нужно под IE подстраиваться, так как многие несчастные — кто по незнанию, кто не по своей воле — им пользуются.
А разработчики стараются создавать новые версии браузеров исправляя ошибки. Так внешний вид сайтов в Опере 10 отличается от вида в Опере 12. NMitra «IE очень капризный к коду шаблона» — я так не считаю. Последняя версия вполне адекватная. И в нём не больше проблем, а по моему опыту меньше, чем в Гугл Хром. Я всё чаще встречаюсь именно с косяками Хрома.

Понятно, если разрабатывать шаблон для IE 6, то тогда ваши претензии уместны. Но глупо сравнивать IE 6 с Хромом, того ещё в проекте не было.

Хром мне так совсем не импонирует — изобретает нововведения, которые никто не поддерживает, а элементарные вещи показывает криво.

Самый без проблемный — Mozilla Fifefox. Далее Опера. Они создавались именно как браузеры, а не придатки поисковиков. У них нет прямой рекламы, они работают на качество. Иначе не смогут конкурировать с гигантами. Елена Родионова Здравствуйте! Как сделать, чтобы окошко (и картинка в нем) подстраивалось под размер окна браузера?
http://testblog-777.blogspot.com/2014/03/photo-005.html NMitra Так у вас всё подстраивается, нужно лишь немного подождать. Елена Родионова Подстраивается только в хромоподобных браузерах. Как можно прописать хак для мозиллы? NMitra Что именно подстраивается? У меня Mozilla Firefox, всё работает. Елена Родионова Картинка не вписывается в окно браузера по высоте NMitra Покажите, пожалуйста, скриншот. vodkomotornik Который раз замечаю — у тебя советы и рецепты самые четкие, внятные и полезные! NMitra Спасибо, что похвалили, очень приятно! 🙂 Анонимный А возможно ли сделать так, чтобы при уменьшении окна картинка уменьшалась к центру или низу? Например, если взять фото со статьи, как сделать чтобы при уменьшении в центре оставался только текст или лицо девочки? NMitra К центру (пример http://jsfiddle.net/NMitra/cguxd5nu/ )

роман шадчин Подскажите: в мобильном шаблоне видео больше чем сам сайт (при входе с мобильного). Мне посоветовали http://c2n.me/3sdS1OA в стили пда шаблона добавьте следующие стили:

что именно нужно прописать и куда именно добавить — Юкоз роман шадчин Беру видео на свой сайт на ютубе,поделиться,iframe NMitra Роман, я не смотрела Юкоз, поэтому не знаю что там да как. При написании статьи, наверно, можно переходить на вкладку «HTML», туда добавьте этот код http://shpargalkablog.ru/2012/06/kartinka-po-razmeru-ekrana-css.html#video

роман шадчин Все оказалось намного проще: в стилях в конце страницы прописал .entry iframe и все стало нормально. NMitra Отлично! Rino Man Подскажите пожалуйста как вставить 3 и более таких видео на страницу NMitra В Ютуб получаете код интересующего видео: «Поделиться»-«HTML-код». Стили (то, что между тегами

включительно) прописываете один раз. А дальше обёртываете полученный iframe в

.my_div

zoom: 100vh;