Адаптивное изображение
Здесь вы узнаете, как сделать адаптивное изображение при помощи CSS.
Адаптивное изображение автоматически подстраивается под размер экрана.
Измените размер браузера, чтобы увидеть эффект адаптации изображения:
Как сделать адаптивное изображение
Шаг 1) Добавляем HTML:
Шаг 2) Добавляем CSS:
Если вы хотите, чтобы изображение при изменении размера браузера увеличивалось и уменьшалось, то установите CSS свойству width значение 100% и свойству height значение auto :
Если вы хотите, чтобы изображение при изменении размера браузера только уменьшалось, но никогда не увеличивалось больше своего оригинального размера, то используйте свойство max-width: 100% :
Если вы хотите ограничить адаптивность изображения каким-то размером, то используйте свойство max-width с нужным значением в пикслях:
Адаптивное изображение
Для превращения изображения в адаптивное изображение, нужно прописать следующий код в стилевой файл (в CSS):
img <
max-width: 100%;
height: auto;
>
После этого любое изображение на сайте будет адаптивным, то есть изображение будет уменьшатся вместе с уменьшением экрана.
Вот посмотрите на результат:
Fit website background image to screen size
I’m just starting on a website and I already encounter a small problem where I can’t find a specific solution to.
I wanted to make my website background fit any screen size in width, height does not matter.
This is the link to my image:
I have no idea what’s wrong, but for some reason the body doesn’t even want to get the background image. It just displays a plain white background.
15 Answers 15
with no need the prefixes of browsers. it’s all ready suporterd in both of browers
You can try with
Try this, I hope it will help:
.. I found the above solutions didn’t work for me (on current versions of firefox and safari at least).
In my case I’m actually trying to do it with an img tag, not background-image, though it should also work for background-image if you use z-height:
This scales the image to be ‘fullscreen’ (probably breaking the aspect ratio) which was what I wanted to do but had a hard-time finding.
It may also work for background-image though I gave up on trying that kind of solution after cover/contain didn’t work for me.
I found contain behaviour didn’t seem to match the documentation I could find anywhere — I understood the documentation to say contain should make the largest dimension get contained within the screen (maintained aspect). I found contain always made my image tiny (original image was large).
Contain was with some hacks closer to what I wanted than cover, which seems to be that the aspect is maintained but image is scaled to make the smallest-dimension match the screen — i.e. always make the image as big as it can until one of the dimensions would go offscreen.
I tried a bunch of different things, starting over included, but found height was essentially always ignored and would overflow. (I’ve been trying to scale a non-widescreen image to be fullscreen on both, broken-aspect is ok for me). Basically, the above is what worked for me, hope it helps someone.
Адаптивные фоновые изображения
Одна из основных задач при адаптивной верстке — это масштабирование изображений (в том числе фоновых) таким образом, чтобы они корректно отображались на устройствах с разными разрешениями экранов.
С картинками в теге img все просто: при установке ширины в процентах высота будет масштабироваться автоматически. К фоновым же изображением такой способ применить нельзя.
Фиксированное соотношение сторон
Данный трюк заключается в установке значения в процентах отступам (padding) элемента. Впервые способ опубликован в старой статье блога A List Apart, однако он до сих пор хорошо работает.
Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон — 16:9. В коде ниже для отступов используется px, но все будет работать и с em. Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv.
Добавляем фон
Полученный элемент масштабируется как надо, но если добавить фоновое изображение, результат будет не очень хорошим. Используем атрибут background-size: cover. К сожалению, в Internet Explorer 8 такой способ не работает. Чтобы решить эту проблему, позиционируем фон с помощью background-position. Фоновая картинка должны быть по ширине как минимум равна max-width элемента. В обратном случае картинка будет обрезаться.
Резиновое соотношение сторон
Предположим, что есть большое фоновое изображение, которое отлично смотрится на десктопе. Но на мобильном устройстве оно будет слишком мелкое, поэтому правильным решением станет уменьшение ширины фона.
Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top:
На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top, начальная высота (start height) — атрибуту height. В итоге получается код:
Использование SCSS для расчета
Атрибуты padding-top and height можно рассчитывать автоматически при помощи препроцессоров, например SCSS. Пример этого: