css фоновое изображение растягивается до размера
Если вы хотите разместить любое изображение на заднем плане, это довольно просто. Если вы хотите сфокусироваться на какой-то точке изображения, которая немного усложняет код CSS. Если вы хотите манипулировать размером, это более сложно. Учитывая, что ни одно изображение не может соответствовать всем размерам экрана.
Рассмотрим случай изменения размера фонового изображения в теле (во весь экран) и внутри контейнера.
Чтобы понять размеры, мы всегда будем брать положение изображения в качестве центра. Это можно изменить в зависимости от изображения.
Установка размера фона в полноэкранном окне.
Мы сделаем тело 100%, чтобы можно было использовать изображение. Вот как выглядит базовый HTML:
<голова> <тело>
Часть стиля будет иметь только сброс HTML и основного текста, а также фоновое изображение с центральным положением и без повторений:
HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady.
jpg) центр без повторов;
} 
jpg) центр без повторов;
} Это просто выведет изображение в теле. Не очень убедительно, верно?
Пример редактирования
Это связано с тем, что фоновое изображение имеет масштаб по умолчанию. Мы можем захотеть изменить его размер, чтобы он выглядел хорошо, по крайней мере, на рабочем столе. Вот как это выглядит после использования размера фона.
/* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
Редактировать пример
Мы можем подогнать его под высоту, изменив код следующим образом:
/* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} Пример редактирования
Использование полноразмерных или полноразмерных изображений не является идеальным. Это идеально подходит для фоновых изображений, где можно обрезать изображение в некоторых точках.
Мы можем установить свойство background-position в то место, где мы хотим установить фокус при изменении размера области просмотра.
Фиксированный и процентный размер фонового изображения:
Фоновый размер может иметь фиксированный или процентный размер. Это позволит растянуть изображение. Любите это, ненавидьте это, есть метод, чтобы нарушить соотношение сторон, если вы хотите его использовать. Это не всегда хорошо выглядит.
Мы просто попробуем управлять шириной фона, чтобы продемонстрировать, как это работает. Это нарушит соотношение сторон.
/* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} Пример редактирования
Это можно сделать как по оси X, так и по оси Y.
/* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} Пример редактирования
Что делать, если мы хотим изменить размер фонового изображения внутри контейнера?
Все методы, которые применимы к телу, глобально применимы для любого элемента, например набора логотипов.
Возможно, нам придется использовать размер в процентах, чтобы изображения, такие как логотипы, не обрезались из-за размера фона.
Основное правило изменения размера изображения выглядит так:
/* Настройка базовой сетки */
.logo-контейнер{
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого{
размер фона: авто 70%;
} Этот размер подойдет, учитывая, что большинство логотипов имеют прямоугольное соотношение. Лужи с портретным размером будут обрезаны из-за размера в направлении x.
Пример редактирования
Для большего количества портретных изображений нам просто нужно использовать лучший размер фона. Высота будет больше 70%, чтобы в поле было полное изображение.
.лого{
размер фона: 70% авто;
} Это приведет к следующему выводу.
Пример редактирования
Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE
Подойдут ли эти размеры для адаптивных макетов?
ответ зависит.
Эластичные изображения с HTML и CSS — SitePoint
Web
Поделиться
Во время публикации я заметил, что IE7 позволяет вам использовать CSS для установки ширины изображения в процентах (например, 30%), но он не смог повторно рассчитать этот процент, если вы изменили размер браузера и потребовалось полное обновление, чтобы принудительно изменить размер графики.
Постоянный гуру CSS и соавтор нашего нового справочника по CSS Пол О’Брайен указал на хорошее решение этой ошибки, которое я подробно опишу ниже.
Иногда величайшая сила Интернета может также быть его самой большой ахиллесовой пятой.
Каким бы умным ни был веб-контент в переформатировании для разных устройств и размеров экрана, есть одна проблема с макетом, с которой я всегда сталкиваюсь — тот факт, что гибкие макеты сайтов растягиваются, а изображения — нет.
В то время как макет может растягиваться и сжиматься, а текст может перемещаться и обтекаться, изображениям присваивается размер в пикселях при рождении, и именно так они отображаются впоследствии, независимо от их окружения.
В большинстве типичных макетов статей или блогов это не представляет большой проблемы. На очень большом экране изображения могут показаться немного меньшего размера, но пока текст правильно обтекает изображение, он обычно выглядит немного тяжелым текстом, а не просто неправильным.
Я вижу эту проблему в основном в графических заголовках сайтов и рекламных объявлениях с большим количеством изображений (как показано ниже). Как правило, чем более уравновешенным и собранным они выглядят в браузерах с меньшей шириной экрана, тем более растянутыми и скучными они выглядят на широких экранах.
Итак, какие есть варианты изменения размеров этих макетов?
1) Adobe Flash: Векторная графика всегда будет идеальным инструментом для изменения размера, а Flash всегда был векторным инструментом по своей сути, поэтому, если ваши исходные изображения в основном векторные, есть несколько веских причин для встраивания всего этого в SWF.
2) Canvas: Элемент canvas является частью новой спецификации HTML5 и в настоящее время на удивление хорошо поддерживается большинством ведущих браузеров. Тег холста ( ) сам по себе является не чем иным, как пустым пространством для рисования, ожидающим, пока мы его заполним, но вам понадобится немного вуду JavaScript, чтобы использовать его с пользой.
На данный момент мы оставим холст в покое, но он, похоже, предлагает несколько действительно интересных опций, поэтому мы вернемся к нему в представлении «Дизайн» в ближайшем будущем.
3) Интеллектуальное изменение размера изображения/вырезание швов: Вырезание швов, вероятно, стало модным словом 2007 года, и если вы следите за блогами и форумами SitePoint в последние месяцы, вы, вероятно, уже знаете об этой идее.
. Это как раз та ситуация, в которой блестела бы резьба по шву.
К сожалению, несмотря на блестящую концепцию, способ ее развертывания на странице на данном этапе, по-видимому, появится не раньше, чем через несколько месяцев, и, скорее всего, он будет опираться на Flash.
Однако, пока мы ждем лучших технологий, я придумал альтернативный метод изменения размера изображений в определенных ситуациях . Это, конечно, неприменимо в большинстве ситуаций, но если вы помните об этом, когда планируете свои изображения, это может быть хорошим трюком, чтобы держать руку на пульсе.
Во-первых, давайте посмотрим на растянутое изображение в действии. Справа анимация, показывающая растяжку. Почти идентичный код работает на домашней странице SitePoint (поочередно), но я выделил его на отдельную страницу, чтобы упростить задачу.
Как вы можете видеть, когда вы расширяете окно браузера, три «блока функций» удаляются от изображения книги, а «соединяющиеся рукава» остаются соединенными .
Хотя эффект в конечном итоге терпит неудачу при сверхшироком и очень низком разрешении, он определенно работает с доступным пространством гораздо элегантнее, чем когда-либо могло бы стандартное изображение — и все это без каких-либо специальных технологий или сложных сценариев.
Метод
Конечно, браузеры могут и всегда могли изменять размер изображений на лету. Просто они всегда проделывали такую гнилую работу, поэтому мы, дизайнеры, склонны игнорировать эту способность.
Ключом к этому трюку является ограничение эластичности наименее важными частями изображения — в данном случае соединительными рукавами.
Наше изображение состоит из трех меньших перекрывающихся графиков, каждый из которых имеет значение position:absolute , что просто упрощает весь процесс их наложения. DIV-оболочка, которая их содержит, устанавливается на position:relative , чтобы держать их внутри своей коробки.
Графика 1: Книга
Сама книга представляет собой прозрачный PNG8 и имеет значение left:55% — это гарантирует, что она всегда будет располагаться чуть более чем на половине пути контейнера DIV, независимо от его ширина. Я тоже поставил top:-1em так, чтобы верхний край книги торчал из коробки. Мы не хотим, чтобы это изображение вообще искажалось, поэтому придаем ему естественные размеры — 139x197px.
Наконец, я гарантировал, что изображение книги всегда будет впереди всего остального, установив его z-индекс равным 99. Это гарантирует, что соединительные рукава всегда исчезают за изображением книги .
Графика 2: Три поля с функциями
Поскольку срок действия этих рекламных обложек составляет всего пару недель, я выбрал здесь самый простой вариант и установил три поля с функциями как одно изображение, хотя в идеальном мире я составил бы их список.
Я хочу, чтобы это изображение оставалось с правой стороны контейнера, поэтому я расположил его right:2% .
Как и изображение книги, я переместил его в начало стопки ( z-index:90 ) и установил размеры изображения по умолчанию (111×160 пикселей), чтобы оно оставалось четким и четким.
Рисунок 3: Соединение рук
Это, конечно же, наш эластичный рисунок. Это не что иное, как прозрачный PNG8 с розоватыми пунктирными линиями. Я добавил несколько фальшивых мягких теней, чтобы придать ему больше глубины.
Важно, чтобы эта графика с самого начала оставалась относительно простой и сырой. Если мы сделаем его немного коренастым для начала, растягивание его формы не нанесет ему столько вреда.
Во-первых, я разместил это слева:56%, так, чтобы его левая сторона всегда была заправлена за изображением книги (которое было слева:55% ), независимо от ширины страницы.
Я также установил z-индекс для этого рисунка на 85, поэтому он никогда не должен находиться перед книгой или коробками.
Затем я установил ширину этого соединительного рисунка на width:30% . Это 30% содержащего DIV, поэтому изображение будет растягиваться и сжиматься, как и его контейнер. Правый край изображения красиво прячется за рамками функций.
Не существует волшебного метода для расчета этого процента (30%) — просто нужно немного проб и ошибок. Я установил временную рамку на растягивающемся изображении, пока настраивал его, что помогло сделать вещи более четкими.
Как видите, соединительные рычаги действительно деформируются при растяжении, но это, похоже, не портит общий результат — по крайней мере, на мой взгляд.
Подведение итогов
Если вам нравится этот эффект, то, на мой взгляд, есть две проблемы, с которыми вам придется столкнуться. Первая задача — техническая.
IE7 с удовольствием установит ширину изображения на 30% при загрузке страницы, но упорно отказывается автоматически пересчитывать эту ширину, если вы изменяете размер окна браузера.
Как ни странно, несмотря на все остальные проблемы, IE6 правильно масштабирует изображение, так что это явно новая ошибка.
Вторая задача — просто найти правдоподобную ситуацию, в которой можно использовать эту технику. Я, конечно, был бы рад увидеть любые варианты на тему, которые вы могли бы придумать.
Пол О’Брайен предложил исправить ошибку обновления IE7. Он пишет:
Что касается вашей статьи о растягивающихся изображениях, исправление для IE7 состоит в том, чтобы просто обернуть изображение в диапазон и применить измерения к диапазону и сделать изображение 100% шириной и высотой. Я всегда так делаю и вроде работает без проблем :)
напр.
div#promo-b div span#stretch {
положение: абсолютное;
верх: .5em;
слева: 56%;
z-индекс: 85;
ширина: 30%;
высота: 150 пикселей
}
div#promo-b div span#stretch img {
ширина:100%;
высота:100%;
}
<диапазон>
