Размер картинки в зависимости от размера окна браузера
Обновлено: 05.07.2024
Если для элемента <img> не задать атрибуты width и height , то браузер самостоятельно определит ширину и высоту изображения после загрузки файла и покажет его в исходном размере. Рисунок в формате SVG браузеры, за исключением IE, выводят на всю доступную ширину.
Изменение масштаба и пропорций изображения делается как через атрибуты <img> , так и через стили.
Использование атрибутов
Любую картинку можно как увеличивать, так и уменьшать в размерах, задавая значение высоты или ширины в пикселях или процентах от размера родителя. Если установлена только ширина или высота, то вторая величина вычисляется автоматически исходя из пропорций картинки. Два заданных значения могут исказить пропорции, особенно если они заданы неверно. В примере 1 показаны разные варианты задания размеров в пикселях.
Пример 1. Размеры в пикселях
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Изображения</title> </head> <body> <img src="image/redcat.jpg" alt="Размеры не заданы"> <img src="image/redcat.jpg" alt="Задана ширина" width="400"> <img src="image/redcat.jpg" alt="Задана ширина и высота" width="400" height="400"> </body> </html>
В примере использовалась одна и та же фотография, для первого <img> размеры явно не указаны, поэтому браузер добавил изображение в исходном виде. Для второй фотографии указана ширина 400 пикселей, что привело к уменьшению её размеров при сохранении пропорций. Третья фотография искажена, поскольку задана одинаковая ширина и высота, притом, что исходное изображение не квадратное (рис. 1).
Рис. 1. Размеры фотографии
Аналогичным образом задаются размеры в процентах от ширины родительского элемента, таким образом можно установить картинку на всю ширину окна браузера. В примере 2 показано добавление трёх фотографий в ряд, ширина которых привязана к ширине окна.
Пример 2. Размеры в процентах
В данном примере все размеры заданы в процентах, так что приходится пользоваться математикой, чтобы суммарная ширина не получилась больше 100%. Ширину каждого элемента <figure> устанавливаем как 27%, к ней добавляется поле слева и справа по 2%, итого каждый элемент занимает 31%, а всего 31х3=93%. Оставшиеся 100-93=7% делим пополам, в итоге 7/2=3.5% — столько получается ширина промежутка между блоками. Для первого <figure> отступ слева нам не нужен, поэтому его убираем через свойство margin-left . Результат данного примера показан на рис. 2.
Рис. 2. Масштабирование фотографий
Масштабирование через стили
Стили удобно задействовать, когда нужно массово задать одинаковые размеры для множества изображений, тогда не придётся указывать индивидуальные размеры для каждой картинки через width и height . Но если у вас большое количество иллюстраций разного размера, то стили здесь никак не помогут. Они пригодятся, например, для иконок одинаковой ширины и высоты или когда размеры задаются в процентах, как это показано выше. В примере 3 приведён стиль для изменения размеров всех изображений внутри элемента <figure> .
Пример 3. Размеры через стили
Когда для одного элемента одновременно указывается атрибут width и стилевое свойство width , то стили имеют приоритет выше.
Интерполяция
Предположим, что у нас есть растровая картинка размером 200х200 пикселей и мы увеличиваем её пропорционально по ширине в два раза. Площадь изображения и общее количество пикселей вырастет при этом в четыре раза. Новые пиксели добавляются браузером самостоятельно исходя из набора уже имеющихся. Способ получения этих новых пикселей называется интерполяцией изображения. Надо понимать, что качество очень сильно зависит от самого изображения, масштаба и алгоритма, но обычно результат получается хуже оригинала.
Похожее происходит и при уменьшении изображения, только браузеру уже приходится не добавлять, а выбрасывать часть пикселей.
Алгоритм интерполяции заложен в браузер и может быть изменён с помощью свойства image-rendering . К сожалению, браузеры пока слабо поддерживают это свойство, поэтому приходится указывать несколько разных значений. В примере 4 показано изменение алгоритма, чтобы переходы цветов не размывались, а оставались чёткими. В браузерах Chrome и Opera пример пока не работает, ожидается что поддержка свойства появится в новых версиях.
Пример 4. Изменение алгоритма интерполяции
Результат данного примера показан на рис. 3. Для левой картинки применяется алгоритм, заданный по умолчанию; для правой — метод интерполяции по ближайшим точкам.
Рис. 3. Вид картинок после увеличения масштаба
Вписывание картинки в область
Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).
Пример 5. Использование overflow
Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.
Рис. 4. Фотография внутри области заданных размеров
Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover , оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.
У веб-разработчика два врага: дедлайны и изображения. Хватит пытаться втиснуть картинку в макет! Вот 5 методов для полного контроля над графикой.
Если вы встречались с коварными изображениями, которые никак не хотели подстраиваться под макет, эти техники вам точно помогут.
Быстрое решение
Легким движением руки изображение превращается. в элегантный фон!
Все мы хоть раз пользовались этим читерским приемом, правда?
Свойство background отлично работает, но помните, что использовать его следует только для изображений, не относящихся напрямую к контенту, и в некоторых особых случаях.
Решение из будущего
У тега <img> тоже существует одно чудесное свойство – object-fit . Кстати, оно работает и для видео-контейнеров.
Вот и все! object-fit управляет размещением элемента, если ширина и высота отличаются от его настоящего размера. Вместо cover можно использовать значение contain .
В чем подвох?
К сожалению, свойство не работает в IE и старых версиях Safari, но для них есть полифилл.
Решение Netflix
Этот трюк работает везде и требует только обернуть изображение в дополнительный контейнер. Пропорции сохраняются с помощью паддингов, заданных в процентах, а картинка абсолютно позиционируется.
Эта техника может показаться сложной, но она стоит того, чтобы потратить время и разобраться. Ее используют многие сайты, включая Netflix!
Простое решение
Вероятно, вы его уже знаете и не раз использовали:
Если у вас не очень сложная разметка, эту технику можно использовать везде.
Продвинутое решение
К тому же самое производительное, если говорить о времени загрузки. Тяжелое изображение может существенно замедлить вашу веб-страницу, особенно на мобильных гаджетах.
В современных браузерах адрес изображения может изменяться в зависимости от ширины окна. Для этого существует атрибут srcset !
Его можно комбинировать с тегом HTML5 <picture> , который обеспечивает изящную деградацию до простого <img> .
Предлагаю вашему вниманию небольшую, но полезную статью для тех, кто делает адаптированный сайт. В статье я покажу, как сделать изображение, которое будет автоматически подгоняться под размер экрана.
Использую простое правило в CSS.
○ Если вы для создания сайтов используете Bootstrap, тогда вам достаточно к картинке присвоить класс « img-responsive ».
Например:
○ Если вы для создания сайтов используете HTML+CSS, тогда достаточно использовать простое правило в CSS:
В результате вы увидите картинку, размеры которой будут меняться в зависимости от размера экрана.
Стандартный размер экрана
Здесь я сдвинул окно браузера
Попробуйте сделать то же самое или откройте вот эту картинку через телефон.
○ Если вы используете для создания сайта движок WordPress, тогда сделайте вот такие действия:
1. Откройте в админке файл « style.css » вашей темы и добавьте в самый конец вот это CSS правило:
2. В странице или записи нажмите на картинку , потом в появившихся настройках нажмите на карандаш (изменить) :
3. Откроются параметры изображения. Найдите там поле « CSS-класс изображения » и вставьте туда « img-responsive ». Нажмите на кнопку « Обновить »:
4. Обновите или сохраните запись или страницу и смотрите на результат.
На этом я заканчиваю рассказывать о том, как подогнать картинку под размеры экрана.
Есть ли способ менять размеры изображения паттерна (SVG) в зависимости от размеров окна браузера ?
В приведенном выше примере размеры паттерна меняются, изменяя значения width height у тега pattern . Но пробросить @media вот так:
Есть ли другие способы?
Подскажите, пожалуйста, есть ли способ менять размеры изображения патерна (SVG) в зависимости от размеров окна браузера?
Масштабирование изображения в SVG возможно только при указании viewBox
В случае применения патерна в SVG файле нужно использовать viewBox дважды:
внутри патерна
и в шапке SVG файла:
svg блок обёрнут контейнером
Задавая высоту и ширину его в процентах или в относительных единицах vh и vw и задав
viewBox="0 0 1400 1000" для SVG, получаем масштабирование патерна в зависимости от изменения окна браузера
Update
В комментарии
А можно ли добиться, скажем, что б для устройств с экраном <450px было 4 крысы?
Представьте, что паттерн это тоже самое, как кафельная плитка в ванной.
У вас паттерн (одна плитка) имеет 100px в ширину.
Значит на ширине 400px уложится 4 плитки. Поэтому необходимо выбрать размер viewBox кратным (100 * 4) четырём.
При viewBox="0 0 400 400" - будет всегда, при любом разрешении экрана - 4 плитки по горизонтали
при - viewBox snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
Если необходимо, чтобы размер одной плитки был постоянный - 100 х 100px при любом разрешении дисплея и при этом при разрешении 400px было 4 плитки, то тогда уже не обойтись без медиа запросов, в которых надо будет указывать разную фиксированную ширину для контейнера .decor_404
Например для разрешения экрана 400px .decor - 4 плитки
Для разрешения 1600px - .decor - 16 плиток
В этом случае плитки будут одинакового размера, но будет разное количество при разных разрешениях экрана.
Читайте также: