Как сделать изображение резиновым
Обновлено: 05.07.2024
Одна из основных проблем верстки сайтов в том, что сайт может быть загружен, на огромном количестве экранов с разными размерами по ширине. При этом нужно добиться, чтобы сайт везде выглядел симпатично.
Для решения этой задачи возникло два подхода: первый, при увеличении размеров окна, мы растягиваем контент(резиновая верстка), второй делаем контейнер с фиксированными размерами и спокойно работает внутри него(фиксированная верстка). Оба подхода используются и по сей день, хотя бы как этапы адаптивной верстки.
В фиксированной верстке мы задаем ширину контейнера в пикселях и, как правило, выравниваем его посередине.
В резиновой верстке ширина задается в процентах
Давайте посмотрим, что мы можем сделать с этим на практике.
В фиксированной верстке центральный блок имеет ширину обычно 980px, так чтобы помещаться на мониторы с любым разрешением, включая iPhone и iPad.
Резиновая верстка создается следующим образом. Когда Вы задаете ширину блока в процентах, проценты считаются от ширины родительского блока. Если Вы поместите такой блок внутрь body, то его ширина будет пропорциональна ширине экрана.
С вложенными блоками у нас есть два варианта - сделать их фиксированной ширины, а отступы между ними сделать резиновыми, либо сделать их пропорциональными ширине блока
Внутри одного сайта, мы можем комбинировать элементы резиновой и фиксированных версток.
Например, в приведеном ниже макете голубые полоски являются резиновыми и занимают всю ширину экрана, а блок по центру соответствует фиксированной верстке.
min-width и min-height
Если мы задали ширину блока в процентах, то при сжатии окна блок также будет сжиматься. Если мы хотим остановить этот процесс обжатия блока на каком-то моменте, чтобы, например, чтобы не страдал контент блока, можно задать минимальную возможную ширину блока
например вот так
calc
Давайте рассмотрим следующий шаблон
При уменьшении ширины серого блока, синий блок должен сохранять свою ширину, а белый должен быть резиновым.
Серый блок мы можем задать в процентах, но вот с белым блоком все сложнее. Его ширина - это ширина серого блока минус фиксированная ширина синего блока.
Для этого нам может пригодиться функция calc
Допустим ширина родительского блока 100%, ширина левой колонки 200px. Тогда ширину правой колонки мы можем записать как
НАЛИЧИЕ ПРОБЕЛОВ КРИТИЧНО!
Пропорциональное изменение ширины и высоты
Допустим наш шаблон выглядит вот так
Если блоки резиновые при сжатии, мы получим следующую картину
Происходит это потому, что ширина блоков при сжатии уменьшается, а вот высота остается неизменной. Даже если мы поставим высоту в процентах - это оставит ситуацию без изменений, так так высота сайта при его сжатии не изменяется.
Хотелось бы, чтобы блоки уменьшались пропорционально, то есть квадраты оставались бы квадратами
Добиться этого можно следующим образом. Поставить высоту блока 0px, а padding-top равным ширине. Например
Если Вы попробовали реализовать данную схему, нам остается понять, почему это работает:) Дело в том, что padding, указанный в процентах высчитывает эти проценты не от ширины самого блока, а от ширины блока-родителя, точно также как и ширина. Поэтому 25% в padding-top'e будут равны 25% ширины.
Фиксированные и резиновые верстки в дизайне
Если Вы верстаете сайт по PSD-шаблону или другому графическому файлу, у Вас может возникнуть вопрос - какую верстку хотел применить дизайнер? Если дизайнер имеет хотя бы минимальный опыт в веб-дизайне - ответ прост. Если у элемента нет полей по бокам - подразумевается его резиновость. Если поля есть, значит скорее всего верстка фиксированная.
Практика:
Резиновый шаблон с фиксированной левой колонкой
Резиновый шаблон с двумя фиксированными колонками по бокам
"Резиновая" галерея картинок
Сделать, чтобы картинки были резиновые, а отступы между ними были фиксированные(шаблон должен занимать весь экран)
Сделать два квадрата. Меньший квадрат должен быть посередине по вертикали и горизонтали меньшего
Используя calc выровнять блок по центру экрана
Сверстать шаблон сайта. Сайдбар справа фиксированный по ширине, синий хедер резиновый, блоки контента фиксированные по ширине и выровнены посередине хедера.
Так же, как и с тэгом img, Firefox и Chrome определяют ширину SVG-объекта в 100% и высота изменяется пропорционально увеличению ширины экрана. Если же object-у задать ширину и высоту, то SVG-графика поместится в отдельную область просмотра с заданными размерами.
В случае с Internet Explorer возникает та же проблема, о которой мы упоминали ранее, когда высота SVG по умолчанию равна 150px. Проблема также устраняется путем задания ширины в 100%:
Встраивание SVG при помощи
очень похож по своему функционированию и особенностях на .
Однако браузеры реагируют на данный способ по-разному. На сегодняшний день Chrome, Firefox и Internet Explorer выставляют вставленному в iframe SVG: 300px ширины и 150px высоты. В предыдущих случаях, когда IE использовал стандартную высоту 150px, он использовал ширину в 100%. Однако когда речь идёт об iframe все три браузера устанавливают высоту и ширину iframe’а в фиксированном размере 300px на 150px.
Применение width:100% растягивает iframe для заполнения ширины контейнера, однако высота не меняется – она по-прежнему равна 150px; даже когда контейнер и iframe уменьшаются до ширины меньшей, чем оригинальная ширина SVG, iframe по-прежнему поддерживает высотку в 150рх, приводя к появлению белых пробелов сверху и снизу SVG-изображения. Это происходит во всех трёх браузерах.
Единственный способ изменить высоту SVG – точно задать ее на iframe. Высота затем, конечно, вместе с шириной сформирует окно просмотра, внутри которого будет расположен SVG. Если вы хотите, чтобы SVG поместился внутри окна просмотра без всяких белых пробелов над/под или по сторонам, необходимо будет удостовериться в том, что заданные высота и ширина окна просмотра (iframe) соответствуют соотношению высоты и ширины SVG-изображения.
Не существует “стандартного” способа создать элемент с конкретным соотношением высоты-ширины в CSS. Однако, несколько лет назад Тьерри Кобленц разместил статью на A List Apart, в которой описывается прием, который сегодня известен как Хак заполнения; хак, позволяющий создавать внутренние соотношения для видео и iframe-ов.
Идея padding hack’а заключается в использовании отношения внутренних отступов элемента к его ширине. Когда внутрение отступы установлены в процентном соотношении, проценты вычисляются относительно ширины элемента, даже если мы выставили только верхний внутренний отступ. Аналогичный прием можно использовать в случае с SVG, чтобы сделать элемент “резиновым”. Ниже описаны шаги для достижения нужного нам эффекта.
Пусть тестовый SVG выглядит вот так:
Padding hack – Шаг 1
Для того чтобы сделать SVG адаптивным, когда он встроен в iframe необходимо сделать то же самое, что мы делали ранее: убрать атрибуты height и width из элемента.
Padding hack – Шаг 2
Далее, убедимся в том, что задали атрибут viewBox. В большинстве случаев SVG будет иметь указанный viewBox.
Нет необходимости специально задавайте preserveAspectRatio так как его стандартное значение (xMidYMid meet) является значением, которое нам вполне подходит. Поэтому нет необходимости задавть его, если только значение preserveAspectRatio не должно быть оличным от стандартного.
Padding hack – Шаг 3
Для того, чтобы padding hack сработал, SVG необходимо поместить в контейнер. Для этой цели нам подойдёт элемент div. Этот контейнер получит внутреннее соотношение при помощи padding hack’а (следующий шаг), и затем iframe будет автоматически масштабирован внутри контейнера.
Padding hack – Шаг 4
Далее, мы применяем несколько стилей к контейнеру соблюдая следующие правила:
Итак, что конкретно делают вышеуказанные правила?
Во-первых, мы сбрасываем значение высоты контейнера. Так как внутренние отступы рассчитывается относительно ширины элемента, нам понадобится задать их относительно элемента для его повторного расширения по вертикали.
После того, как мы указали ширину контейнера – которая должна автоматически растягиваться, используя процентное значение, задаём значение верхнего внутреннего (или нижнего) отступа контейнера при помощи следующей формулы. Эта формула использует значения атрибутов height и width, которые мы убрали в Шаге 1) для указания значения заполнения, которое позволит внуреннему отступ контейнера соответствовать размерам svg.
В нашем логотипе ширина svg составляет 194px, а высота – 186рх. Я установил ширину контейнера на 50% чтобы он занимал половину доступного горизонтального пространства. Примененное к контейнеру заполнение равняется (186 / 194) * 50 = 48%. То есть, код для контейнера выглядит вот так:
Так как высота контейнера была сбита и мы выставили большое знаечение верхнему внутреннему отступу, то содержимое будет смещено вниз.
Padding hack – Шаг 5
Теперь, когда у нас есть позиционируемый контекст, разместим iframe внутри контейнера и выставим его размеры таким образом, чтобы они совпадали с высотой и шириной контейнера:
Это всё, что необходимо для того чтобы сделать SVG адаптивным. iframe отображается в стандартной рамке, от которой по всей видимости вы захотите избавиться. Для этого достаточно добавить одно правило: border: none;
Встраивание SVG при помощи Встраивание SVG при помощи
SVG может быть встроен в HTML документ при помощи тега .
Ширина и высота встроенного окно просмотра svg будет такой же, какую вы задали непостредственно элементу. Когда атрибуты ширины и высоты убраны все браузеры будут воспринимать ширину равной 100% и растягивать SVG по горизонтали чтобы заполнить ширину контейнера.
В Chrome и Firefox высота SVG рассчитывается как раз так, как нам нужно. В этом случае адаптивность достигается без особых потерь.
В Internet Explorer (проверено на версиях 9 и 11) высота снова равна 150рх, а ширина 100%. Как и в предыдущих случаях, при изменении размера экрана, сверху и снизу SVG появится белое пространство. При использовании img было достаточно указать width: 100%; однако, выставив ширину в 100% самому svg такой же эффект не будет достигнут. В этом случае лучшим решением будет применение padding hack-а.
SVG встроенный как фоновый рисунок при помощи CSS
Одним из популярных способов встраивания SVG является использование фонового рисунка:
К счастью, нам не нужно применять никакие фиксы или хаки чтобы заставить фоновый рисунок SVG вести себя как необходимо - фоновый рисунок SVG может быть расположен, наложен, изменен в размере и масштабирован как любой фоновый рисунок.
Делаем SVG адаптивными при помощи CSS медиа запросов
Тот факт, что графические элементы внутри SVG создаются при помощи XML, делает работу с SVG очень удобной. Так как SVG-контент состоит из XML тэгов, которые отображают графику мы можем выбирать отдельные элементы и применять к ним конкретные стили точно так же, как мы выбираем элементы HTML, используя CSS селекторы.
Элементы SVG обычно стилизуются при помощи презентационных атрибутов вроде fill, stroke, transform и других. Однако только подмножество всех презентационных атрибутов может быть задано при помощи CSS. Вы можете найти список задаваемых стилей, в спецификации стилей SVG. Список задаваемых при помощи свойств CSS атрибутов на данный момент не включает атрибуты x, y, width и height; однако эта четвёрка будет добавлена в список, и мы сможем задавать их при помощи CSS.
Некоторые из самых часто задаваемых свойств: fill, который работает подобно фоновому цвету; stroke, который схож с border; opacity, display, transform и некоторые другие.
Далее мы добавим медиа запросы внутрь тэга
Вот так вставляем логотип:
Пора отметить, что размеры, указанные в медиа запросах, ссылаются на размеры окна просмотра SVG. В зависимости от способа, которым вы встраиваете SVG, окно просмотра может быть либо размера самого (для встроенных SVG), либо размера ссылаемого SVG элемента.
У каждого из элементов внутри SVG есть ID, который мы можем использовать в CSS:
Изменение логотипа в зависимости от размеров экрана - тоже адаптивность. Некоторые логотипы компаний могут занимать слишком много пространства на маленьких экранах, поэтому мы всё чаще видим, как множество логотипов адаптируются, путем избавления от текстовой части. Без SVG этого можно было бы достигнуть путем переключения PNG на экранах различных размеров. Однако такой подход не очень эффективен, ведь вам потребуется хранить на сервере множество картинок. В данном случае явно видны преимущества SVG: гибкость в использовании и прекрасное отображение на экранах.
В завершении
С выходом всё новых и новых версий Chrome и Firefox, увеличивается поддержка SVG, поэтому информация в данной статье в какой-то момент может стать не актуальна. Internet Explorer как всегда замедляет всю движуху, поэтому упомянутые фиксы будут актуальны долгое время.
5 последних уроков рубрики "CSS"
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.
Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset , для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.
Давайте отбросим лишнюю тягомотину, современные спецификации позволяют нам сделать изображения, используемые на страницах сайтов, гибкими и корректно отображающимися на экранах различных пользовательских устройств, для этого достаточно использовать всего лишь несколько свойств из обоймы CSS.
Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width (ширины) и значении auto для свойства height (высоты) изображений.
Базовые значения адаптивного изображения
Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.
HTML:
CSS:
Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.
Адаптивные изображения в колонках
Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.
1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.
HTML:
CSS:
2. Три колонки изображений
С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32% .
HTML:
CSS:
Условная расстановка адаптивных изображений
В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .
HTML:
CSS:
/* Для небольших устройств (смартфоны) */ img < max-width: 100%; display: inline-block; >/* Для средних устройств (планшеты) */ @media (min-width: 420px) < img < max-width: 48%; >> /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) < img < max-width: 24%; >>
Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…
Адаптивное изображение на всю ширину экрана
Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.
CSS:
Несмотря на то что данная техника очень проста в использовании и имеет устойчивую поддержку браузерми, следует помнить о том, что изображения всегда будут показаны в полный размер, т.е. большие, с высоким разрешением изображения показываются заполняя всё пространство, что для небольших мобильных устройств, не всегда в тему, если только картинка не используется в качестве фонового изображения.
На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.
Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 41
Спасибо, хорошо объяснили про колонки
Класс!
Блин очень круто, спасибо!
Все хорошо Вы описали. Но это все лучше отнести к резиновому дизайну, а не к адаптивному.
В том то и смысл чтобы на мобильных показать совсем другие изображения.
В css через backgraund-image и CSS media queries это делается легко, но в таком случае картинка при плавному уменьшении ширины браузера меняется скачками (в зависимости от того, сколько изображений мы подготовили).
Если же вставлять картинки с помощью тега как здесь описывается, то как менять картинки для разных разрешений? С помощью JS получить ширину девайса, передать из JS в PHP значение ширины девайса (перезагрузка страницы) и выводить нужную картинку с помощью HTML и PHP.
Либо же в HTML выводить несколько изображений, а через CSS скрывать ненужные из них с помощью CSS media queries. Но в этом случае грузятся лишние картинки…
А если изображение маленькое и без атрибутов ширины и высоты? Тогда как? Оно увеличивается на всю ширину дива…
Соответственно, так как базовая ширина задана в width: 100%;
В данном случае размер предопределяется с помощью свойства max-width:
А что будет с картинками, у которых высота больше чем ширина? 😉
Попробуйте и всё узнаете ))
Нужно поставить два лого по краям экрана. Шаблон адаптивный. То есть нужно, что бы на маленьких устройствах лого выводились одно под другим. Подскажите как можно это реализовать? Конкретнее как реализовать отображение двух адаптивных картинок по краям большого экрана? Как то так )))
Если совсем уж по-простецки, то примерно так: см. пример в редакторе изменяйте размер поля просмотра: тынц
Спасибо!
Наконец-то нашел то, что нужно!
Самая изящная идея. Никакой воды. Всё только по существу. Просто, доступно и понятно.
Теперь с таким инструментом и сайт будет красиво выглядеть, благо и в CSS лишь немного дополнений ввести останется и привести его к большей логике. А то поначалу, задумавшись о кросс-браузерности, боялся, что несколько типов сценариев и файлов CSS придется делать. Теперь — на одну головную боль меньше.
Еще раз Спасибо!
Здравствуйте. У меня вопрос : можно ли всё это сделать на вап ?
А как сделать на одной странице одно изображение адаптивным, адругие фиксированными. Буду признателен…
Добрый день.
А как сделать так, чтобы не было промежутков между картинками в случае условной расстановки?
Используйте отрицательное значение margin, для всех вариантов, в том числе и для условной расстановки будет примерно так:
img width: 100%;
height: auto;
margin:-3px;
>
Как вариант. Спасибо.
Спасибо за подсказку. Статья помогла решить проблему. Очень толково, даже для начинающего
Добрый день.Картинки на сайте не уменьшаются не адаптивные. Я дописал в css
img max-width: 100%;
height: auto;
Почему они не меняются под размер окна?
Мой сайт lifepc.by
Спасибо! Буду осуществлять на своем сайте!
Спасибо, отличная статья. А есть ли способ показать в контейнере не всё изображение а только его часть, обрезать его по краям, используя только css, не прибегая к обрезке самого изображения.
Добрый день! Не могу сделать изображение шапки адаптивным…Помогите пожалуйста)
Базовые значения адаптивного изображения через СSS помогло. Нуб нубом в html, вояю через дримвер 6, наконец то на мобилке картинки четко! Спасибо автору.
Здравствуйте.
Подскажите пожалуйста правильно ли я вас понял.
Каждый раз создавая страницу или запись на сайте (вордпресс) мне надо будет в каждом блоке где хочу ее вывести прописывать ее в хтмл и после стайлить ее?
Не судите строго, новичек.)
Здравствуйте.
Стили для изображений задаются и легко изменяются в style.css любой темы wordpress, как базовые, так и для отдельных блоков. Каждый раз в html прописывать ничего не нужно.
Например, прописав в .css для картинок значения width: 100%; height: auto; вы сделаете их отзывчивыми и при размещении в блоках имеющих относительные значения ширины, а это уже обязательное условие современных тем, все ваши картинки будут автоматом подстраиваться под заданный размер родителя.
Рассмотрите подробнее фарш style.css демо-страницы и надеюсь поймёте сам принцип работы, как для отдельных блоков, так и для базы.
А можно также сделать с картинками которые обернуты в div со свойством inline block
Здравствуйте. А если изображение подключено в css как его сделать адаптивным?
Здравствуйте.
Если в качестве фоновой картинки background-image: понадобятся свойства background-position: , background-repeat: , background-attachment: , background-size: и background-color: с определёнными значениями
Так как я не знаю в качестве чего вы используете изображение, подробности расписывать не берусь, дабы не тратить время в пустую
У меня есть div контейнер который тянется по ширине экрана, есть картинка которую я туда засунул, но она не тянется по ширине экрана. Я знаю, что я могу сделать с помощью таблиц и всё будет прекрасно. Но таблицы не проходят. Вот как мне сделать резиновую картинку в div контейнере, что бы она тянулась так же как и div в зависимости от разрешения экрана.
Только не надо предлагать вариант когда картинка просто обрезается и всё. Надо что бы именно растягивалась. Помогите в этой, заранее спасибо.
Не надо заниматься такими глупостями. Если картинку без конца расширять, рано или поздно прорежется пикселизация, и вид у всего этого будет преотвратный.
Но если очень хочется, можно установить атрибут width=100% -- тогда картинка будет расширяться до ширины содержащего ее элемента.
Читайте также: