Как растянуть изображение css
Растянуть и масштабировать изображение CSS в фоновом режиме-только с CSS
Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера окна просмотра браузера.
Я видел некоторые вопросы о переполнении стека, которые выполняют эту работу, например растянуть и масштабировать фон CSS например. Он работает хорошо, но я хочу разместить изображение с помощью background не с img тег.
в этом АН img тег помещается, а затем с помощью CSS мы отдаем должное img тег.
это работает, но этот вопрос немного устарел и утверждает, что в CSS 3 Изменение размера фонового изображения будет работать довольно хорошо. Я пробовал это пример первый, но это не сработало для меня.
есть ли хороший метод, чтобы сделать это с background-image декларации?
18 ответов
это масштабирует изображение так, чтобы фоновая область полностью покрывалась фоновым изображением при сохранении соотношения сторон. Вся область будет покрыта, однако часть изображения может быть не видна, если ширина / высота измененного изображения слишком велика
вы можете использовать свойство CSS3, чтобы сделать это довольно красиво. Он изменяет размер до соотношения, поэтому нет искажения изображения (хотя он делает высококлассные небольшие изображения). Просто обратите внимание, что он еще не реализован во всех браузерах.
С помощью код Я уже упоминал.
HTML-код
в CSS
это производит желаемый эффект: прокручивается только содержимое, а не фон.
фоновое изображение изменяет размер окна просмотра браузера для любого размера экрана. Если содержимое не соответствует видовому окну браузера и пользователю необходимо прокрутить страницу, фоновое изображение остается фиксированным в видовом окне, в то время как содержимое свитки.
С CSS 3 кажется, что это было бы намного проще.
растягивает bg, чтобы заполнить весь элемент на обеих осях
следующая часть CSS должна растягивать изображение со всеми браузерами.
Я делаю это динамически для каждой страницы. Поэтому я использую PHP для создания собственного HTML-тега для каждой страницы. Все фотографии находятся в папке «image» и заканчиваются на » Bg.в JPG’.
Это было протестировано с помощью Internet Explorer 9, Chrome 21 и Firefox 14.
используйте этот CSS:
вы можете достичь того же эффекта, что и фоновое изображение с тегом img. Вам просто нужно установить его z-индекс ниже, чем все остальное, установить position: absolute и использовать прозрачный фон для каждого окна на переднем плане.
Вы можете добавить этот класс в CSS-файл.
для того, чтобы масштабировать изображения в соответствии с размером контейнера следующие:
Я использую это, и это работает со всеми браузерами:
Я согласен с изображением в абсолютном div со 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установили поля и отступы на ноль. Еще одна проблема, с которой вы столкнетесь с этим методом, заключается в том, что при выборе текста область выбора иногда может включать фоновое изображение, что имеет неудачный эффект создания полной страницы с выбранным состоянием. Вы можете обойти это, используя user-select:none правило CSS, например:
снова, Internet Explorer-плохой парень здесь, потому что он не распознает опцию выбора пользователя-даже Internet Explorer 10 preview поддерживает его, поэтому у вас есть возможность использовать JavaScript для предотвращения выбора фонового изображения (например,http://www.felgall.com/jstip35.htm) или с помощью CSS 3 метод растяжения фона.
кроме того, для SEO Я бы поставил фоновое изображение в нижней части страницы, но если фоновое изображение занимает слишком много времени для загрузки (то есть с белым фоном изначально), вы можете перейти в верхнюю часть страницы.
попробуйте установить height:auto;min-height:100%;
так что измените это для своего height:100%; линии, дает:
непосредственно перед этим недавно добавленным кодом у меня есть это в моем Друпал тандю темы style.css :
тогда я должен сделать новый блок в Drupal с изображением при добавлении class=stretch :
просто копирование изображения с редактором в этом блоке Drupal не работает; нужно изменить редактор к неформатированному тексту.
Я хотел центрировать и масштабировать фоновое изображение, не растягивая его на всю страницу, и я хотел, чтобы соотношение сторон поддерживалось. Это сработало для меня, благодаря вариациям, предложенным в других ответах:
использовать Бэкстретч плагин. Можно даже сделать несколько слайдов. Он также работает в контейнерах. Таким образом, например, можно было бы только часть фона была покрыта фоновым изображением.
Так как даже я мог заставить его работать, доказывает, что это простой в использовании плагин :).
можно использовать border-image : yourimage свойство для масштабирования изображения до границы, даже если вы даете фоновое изображение, то изображение границы будет нарисовано поверх него.
вы хотите достичь этого, используя только одно изображение? Потому что вы можете сделать что-то похожее на растягивающийся фон, используя два изображения. PNG картинки, например.
Я сделал это раньше, и это не так сложно. Кроме того, я думаю, что растяжка просто повредит качеству фона. И если вы добавите огромное изображение, это замедлит медленные компьютеры и браузеры.
css растянуть изображение на всю ширину
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 3.0+ | 9.6+ | 3.1+ | 3.6+ | 2.0+ | 1.0+ |
Задача
Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.
Решение
Пример 1. Растягиваемый фон
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Рис. 1. Вид фона при уменьшенном размере окна
При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).
Рис. 2. Вид фона при увеличенном размере окна
Где будем растягивать картинку, так чтоб она смотрелось корректно, так как если идет фон под одним оттенком цвета, с ним легче работать. Не забываем про соответствие картинка на ее пропорций. И обязательно должно получится, что изображение установилось по центру. Что главное, все должно быть максимально кроссбраузерно и понятное дело, без различных махинаций с flash.
Метод CSS3 background
Это метод самый распространенный, что может растянуть background на чистом CSS, и все благодаря одному свойству, под названием background-size, что только будет присутствовать в CSS3.
Здесь изначально создадим background фиксированным и выставим его по центру, что останется его только растянуть, где подключаем свойства background-size, это все идет под ссылку на фон.
В общим ориентируемся с блоком которому присваиваем стили и дописываем в файле стилей этому блоку, следующий код:
Как можно заметить, что параметр background, где изначально добавляем путь на картину, где происходит установка положение изображение в соответствие окна экрана. Если разбирать, то значение center и top отвечает за центр и прижатие по всем сторонам, чтоб не было пробелов. Чтоб понятно было, то значение fixed — отвечает за функцию фиксаций.
Метод совсем обычный, что применяю постоянно и он меня устраивает на все 100% процентов.
Еще один обычный метод воплотить наверное, вставить картину на страницу. Она станет обладать фиксированную позицию и будет размещена в верхнем левом углу. Мы присвоим ей min-width и min-height 100%. Еще необходимо заблаговременно приготовить картину, в намерении пропорциональности сторон.
Здесь как можно заметить, что этот код не центрирует background image, что можно быстро все сделать как нужно, а точнее фиксировать изображение с помощью взятия ее в div.
На этом все, здесь представлены не все способы, а те, которые больше пременяют.
Также небольшое видео, где все понятно объясняют по как при помощи CSS растянуть фон на весь экран.
Когда-то искал способ, как растянуть фон блока или всего сайта на всю ширину и высоту. Причем сделать это так, чтобы происходило автоматическое масштабирование фона. То есть, не просто растянуть и потерять пропорции изображения, а чтобы все выглядело правильно без искажения.
Помню перерыл много информации и испробовал не мало способов, пока не нашел именного того решения, что нужно было именно в тот момент.
Ниже я покажу 3 способа, которые растягивают фон на всю ширину экрана.
Способ №1
Первый способ использует чистый CSS3. Все получается благодаря свойству background-size. В моем случаи я буду растягивать картинку на всю ширину экрана, то есть присвою свойства к тегу body. Вы можете применить по надобности к блоку например.
Растягивать на весь экран будем вот эту картинку с милой девушкой ��
В общим определяемся с блоком которому присваиваем стили и дописываем в файле стилей данному блоку, следующий код:
Как видите, в параметре background добавляем путь к изображению и устанавливаем положение картинки относительно экрана. В нашем случаи это center и top. Это означает что картинка будет в центре экрана, и прижата своим верхом к верху экрана. Это для того, чтобы всегда было видно лицо девушки. Если у Вас например абстрактный фон или природа, где видно небо, поле, горизонт, то можно поставить значения center и center. В общим если вы знакомы с CSS, то думаю разберетесь. Также установлено значение fixed, которое фиксирует изображение.
Способ очень простой, я его использую всегда и он меня устраивает на все 100%. Есть лишь одно но. Старые браузеры, не знакомы с CSS3, поэтому те кто используют древние версии не увидят должного результата.
Способ №2
Данный способ использует обычный CSS. По сути тоже простой. Выводим в теле сайта изображение присвоив id — bg:
И прописываем стили:
Позиционирование фиксированное и проходит растяжение на весь экран.Вот так просто :).
Способ №3
Тут применяется jQuery. Поэтому сначала нужно подключить библиотеку, если она не подключена ранее.
После библиотеки подключаем скрипт, который и будет масштабировать наш фон
Далее уже как и во втором способе, в теле сайта выводим картинку и присваиваем ей id, например bg.
И в конце добавляем стилей, чтобы все работало. Открываете файл стилей и добавляете в него следующий код:
По стилям видно, что мы добавили позиционирование. В данном случаи это fixed. Изображение при прокрутке будет оставаться фиксированным фоном, если же изменить позиционирование на absolute, то фон можно прокрутить. Кстати, так же можно сделать и с первыми двумя способами.
Какой способ использовать, решать Вам. Как и писал Выше, мне более близок первый способ. Он самый простой и не хуже других.
На этом все, спасибо за внимание. ��
Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂
Как background image растянуть, чтобы заполнить веб-страницу
Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. B ackground image HTML поможет получить тот визуальный дизайн, который вы ищете.
При работе с фоновыми изображениями вы столкнетесь с проблемой растягивания рисунка на всю страницу. Потому что не каждое изображение подходит сайту по размеру. Вместо того чтобы устанавливать фиксированный размер, растягивание изображения позволяет заполнить страницу. При этом неважно, насколько широкое или узкое окно браузера.
Имитация растянутого фона в устаревших браузерах
Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:
Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg» :
Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
Добавьте приведенный ниже код в таблицу стилей:
Примечание : сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.
Имитация растянутого фонового изображения на меньшем пространстве
Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.
Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.
Дайте знать, что вы думаете по данной теме в комментариях. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!
Пожалуйста, опубликуйте свои комментарии по текущей теме материала. Мы крайне благодарны вам за ваши комментарии, дизлайки, отклики, лайки, подписки!
Изображение на всю ширину макета
Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.
Рис. 1. Главная страница сайта boeing.com
При «резиновом» макете, когда требуется установить изображение на всю ширину окна браузера, независимо от его размера, применяют методы, которые подробно описаны далее.
Растягивание рисунка до 100%
Первый метод состоит в том, что для тега значение атрибута width устанавливается равным 100% (пример 1). Изображение в таком случае растягивается на всю ширину контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом неизбежно появятся искажения, поэтому подобный метод применяется достаточно редко и далеко не для всех картинок.
Пример 1. Ширина изображения
В данном примере ширина ( width ) рисунка задана как 100%, а высота ( height ) — 100 пикселов.
Использование бесшовного фонового изображения
Вначале следует подготовить фоновый рисунок, он обязательно должен быть таким, что если рядом положить две одинаковые картинки, то они сливаются в одну, и между ними не возникает заметных артефактов. Пример такого изображения показан на рис. 2.
Рис. 2. Изображения для создания фона
Ширину рисунка достаточно сделать 20–30 пикселов.
Остерегайтесь делать слишком малую ширину подобной картинки, вроде 1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно, а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную площадь.
Сам фон представляет интерес лишь как часть общего результата. Это значит, что на фоновую область следует наложить еще один рисунок так, чтобы вместе они образовали единое целое. На рис. 3 показано изображение, правый край которого совпадает с фоновым рисунком. Поэтому при наложении этого рисунка на фон они точно совпадут.
Рис. 3. Картинка для наложения на фон
Пример 2. Фоновая картинка
Использовать фоновый рисунок не всегда обязательно, иной раз вполне подойдет и одноцветная заливка прямоугольной области. Чтобы гармонично расположить изображение на таком фоне применяют тонирование рисунка (сепия, как это еще называется) или градиентный переход, как показано на рис. 4.
Рис. 4. Изображение с градиентом для размещения на цветном фоне
Графические файлы в формате JPEG не всегда подходят для наложения на цветной фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого перехода от изображения к фону может не получиться, поскольку будет виден заметный стык. В этом случае лучше применять формат GIF или PNG.
При использовании одноцветного фона код незначительно поменяется (пример 3). Повторять фон теперь не нужно, поэтому свойство background будет иметь только одно значение — желаемый цвет фона.
Пример 3. Цвет фона
В данном примере устанавливаем параметры блока — его высоту и цвет, а также характеристики текста заголовка. Полученный результат продемонстрирован на рис. 5.
Рис. 5. Совмещение цвета фона и рисунка
Фоновый рисунок большой ширины
Предыдущий способ, хотя и применяется достаточно часто и дает вполне подходящий результат, все же не устанавливает один рисунок на всю ширину макета. Для достижения этой цели применяют следующий алгоритм. Вначале подготавливается изображение достаточно большой ширины (от 1000–1200 пикселов), после чего оно ставится как фоновый рисунок для определенного слоя.
Рис. 6. Фоновый рисунок в окне браузера
Пример 4. Рисунок на всю ширину страницы
При использовании фонового рисунка следует учитывать свойственные этому методу ограничения. А именно:
Резюме
Способ добавления изображения на всю ширину макета веб-страницы зависит от применяемого метода верстки. Если используется макет фиксированной ширины, то общая его ширина известна заранее и рисунок по горизонтали следует ограничить этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом, что получается слитная единая картинка. Также применяются широкие фоновые изображения, которые не приводят к появлению горизонтальной полосы прокрутки, но при этом занимают всю отведенную им ширину, независимо от размера окна браузера.
CSS заставить изображение изменить размер и сохранить соотношение сторон
Я работаю с изображениями, и я столкнулся с проблемой соотношения сторон.
Как видите, height и width уже указаны. Я добавил правило CSS для изображений:
17 ответов:
это заставит изображение сжиматься, если оно слишком велико для указанной области (как недостаток, оно не будет увеличивать изображение).
приведенные ниже решения позволят увеличить и уменьшить масштаб изображения, в зависимости от ширины родительского поля.
все изображения имеют родительский контейнер с фиксированной шириной только для демонстрационных целей. В производстве, это будет ширина родительского окна.
Лучшая Практика (2018):
это решение говорит браузеру отображать изображение с максимальной доступной шириной и регулировать высоту в процентах от этого ширина.
Более Причудливое Решение:
С помощью решения fancier вы сможете обрезать изображение независимо от его размера и добавить цвет фона, чтобы компенсировать обрезку.
для строки, задающей отступ, необходимо рассчитать соотношение сторон изображения, например:
Итак, верхняя прокладка = 34.37%.
Я боролся с этой проблемой довольно трудно, и в конечном итоге пришел к этому простому решению:
вы можете настроить ширину и высоту в соответствии с вашими потребностями, а свойство object-fit выполнит обрезку для вас.
свойство background-size-ie>=9 только, но если это вас устраивает, вы можете использовать div с background-image и set background-size: contain :
теперь вы можете просто установить размер div на все, что вы хотите, и не только изображение будет сохранять свое соотношение сторон, но также будет централизовано как по вертикали, так и по горизонтали в div. Просто не забудьте установить размеры на css, так как divs не имеют атрибута width/height на самом теге.
этот подход в отличие от ответа setecs, используя это, область изображения будет постоянной и определенной вами (оставляя пустые пространства горизонтально или вертикально в зависимости от размера div и соотношения сторон изображения), в то время как ответ setecs даст вам поле, которое точно соответствует размеру масштабированного изображения (без пустых пространств).
изменить: Согласно MDN background-size documentation вы можете имитировать свойство background-size в IE8 с помощью собственного фильтра объявление:
хотя Internet Explorer 8 не поддерживает свойство background-size, можно эмулировать некоторые его функции с помощью нестандартной функции ms-filter:
очень похоже на некоторые ответы здесь, но в моем случае у меня были изображения, которые иногда были выше, иногда больше.
этот стиль работал как шарм, чтобы убедиться, что все изображения использовать все доступное пространство, сохранить соотношение и не режет:
при указании обоих вы изменяете соотношение сторон изображения. Просто установка одного будет изменять размер, но сохранить соотношение сторон.
дополнительно, чтобы ограничить превышения:
просто добавьте это в свой css, он будет автоматически сжиматься и расширяться с сохранением исходного соотношения.
поэтому мы вынуждены либо указать width и height чтобы предотвратить «скачки» страницы во время загрузки изображений, или использовать max-width и не указывать размеры для изображений.
определения width (без height ) обычно не имеет большого смысла, но вы можете попробовать переопределить height HTML-атрибут, добавив правило, как IMG
установите класс CSS вашего тега контейнера изображений в image-class :
и добавить это вам ваш CSS таблицы стилей.
вот ответ, если вы хотите поместить изображение с фиксированный процент от ширины, а не фиксированный пиксель шириной.
и это будет полезно при общении с разный размер экрана.
Я также прокомментировал большинство трюков внутри скрипки.
Я также найти некоторые другие способы, чтобы это произошло. В html не будет реального изображения, поэтому я лично выполняю верхний ответ, когда мне нужен элемент «img» в html.
чтобы поддерживать отзывчивое изображение, сохраняя при этом изображение с определенным соотношением сторон, вы можете сделать следующее:
Это можно использовать для установления определенного соотношения сторон, независимо от размера изображения, которое авторы загружают.
спасибо @Kseso at http://codepen.io/Kseso/pen/bfdhg. проверьте этот URL для получения дополнительных соотношений и рабочего примера.
вы можете создать div следующим образом:
и используйте этот css для его стиля: