Как растянуть картинку на весь экран?
Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо.
2 мар 2016 в 7:27
Спасибо большое! Очень помогло
22 мая 2020 в 10:43
Отслеживать
ответ дан 2 апр 2012 в 14:58
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 20 20 бронзовых знаков
не сработает если реальная ширина картинки будет меньше ширины окна браузера.
2 апр 2012 в 15:09
Важно не забывать кавычки ставить: background: url(«img/image.jpg») , иначе на экранах с некоторым разрешением внизу может появляться «полоса»— опускается самая верхняя часть фоновой картинки.
Отслеживать
ответ дан 19 фев 2016 в 11:18
Саша Черных Саша Черных
4,286 14 14 золотых знаков 42 42 серебряных знака 92 92 бронзовых знака
Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно no-repeat
19 фев 2016 в 11:27
@soledar10, да, ибо таким образом лично разрешил проблему на своём сайте. Раньше нижняя часть его страниц выглядела на моём мониторе так: !1 !2 Если надо, могу html-страницы скинуть, проверьте на Screenfly с кавычками и без. Спасибо.
19 фев 2016 в 13:45
jsfiddle.net/soledar10/vLvrzh2x без разницы есть кавычки или нет
20 фев 2016 в 8:10
@soledar10, если изображение по ссылке, тоже не вижу изменений. Но если лежит в папке, похоже, кавычки приобретают значение: Отображение с кавычками / Отображение без кавычек / Код с кавычками / Код без кавычек / Спасибо.
20 фев 2016 в 12:51
Дело в том, что пробел не должен содержаться в адресе. Если он там есть, то помогает одно из следующих решений: 1. Честно заменить пробел на %20 . 2. Написать адрес в кавычках. 3. Экранировать пробел \ . В приведённых примерах фон с пробелом без кавычек вычёркивает всё css-свойство включая no-repeat center center fixed , однако, за счёт того, что у body есть устаревший атрибут background с той же картинкой, он всё же отображается. На самом деле, в нормальной ситуации фона в таком случае вообще не окажется.
1 мар 2016 в 16:14
Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.
Как растянуть изображение?
Добрый день!
Скажите как мне растянуть изображение? На подобии эффекта background-size: cover;
У меня имеется сетка css grid внутри которой располагается контент, фотографии.
Но вот именно у одного из блоков изображение не заполняет всю область.
Я не могу разобраться почему и как починить это.
P.S. На заднем плане это изображение (совы) на тот случай если основная фотография пропадёт. И кстати вот она хорошо растягивается везде.. 
Мой HTML код. там таких 12 боксов
Имя Человека 2.9m followers
Моя сетка css grid
.our-clients < padding: 20px; display: grid; grid-gap: 20px; grid-template-areas: 'box-1 box-2 box-3 box-4' 'box-5 box-5 box-6 box-6' 'box-5 box-5 box-7 box-8' 'box-9 box-10 box-11 box-12'; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(auto, 100%); a < display: contents; >> .box-1 .box-2 // и так далее ещё 10 штук таких
Стили для изображений
.item < display: flex; align-items: center; justify-content: center; background-image: url(../img/no_photo.png); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 10px; width: 100%; height: 100%; overflow: hidden; img < width: 100%; >>
Для наглядности залил на хостинг сайт вот он
- Вопрос задан более трёх лет назад
- 1890 просмотров
Делаем картинку такой же высоты как соседний блок с помощью flex и object-fit
Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки. Нужно сделать так, чтобы картинка была такой же высоты как и блок справа на любом разрешении экрана.
Рабочий пример, как растянуть картинку на высоту соседнего блока
Упрощенный код SCSS для блоков одинаковой высоты
// reset for img img < max-width: 100%; height: auto; vertical-align: bottom; >.line < display: flex; justify-content: space-between; max-width: 768px; margin: 20px auto; >.left < flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); .pic-holder < height: 100%; >.pic < width: 100%; height: 100%; object-fit: cover; >> .right < flex: 0 1 calc(50% - 10px); max-width: calc(50% - 10px); display: flex; flex-direction: column; justify-content: space-between; .item < padding: 40px 20px; text-align: center; background-color: #ccc; margin-bottom: 20px; &:last-child < margin-bottom: 0; >> >
Один нюанс.
Если высота картинки больше чем высота соседнего блока, то картинка может выходить за границы, и поэтому в моем примере элементы внутри соседнего блока растягиваются по высоте, что бы и левый, и правый блоки имели одинаковую высоту.
Задача — выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии…
Мой репозиторий — https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG,…
В общем, очередная секретная разработка для ускорения процесса создания сайтов. Обычно для верстки я использовал…
CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS….
Как растянуть картинку
Увеличить размер картинки на странице определенного ресурса Интернета достаточно просто. Для этого придется всего лишь поменять некоторые значения программного кода картинки, размещенного рядом с ней. Новые величины выражаются в процентах, которые указывают на предполагаемое масштабирование этого изображения. При проведении данной операции необходимо учитывать собственное разрешение монитора компьютера. Целесообразно производить проверку на нескольких мониторах.
Статьи по теме:
- Как растянуть картинку
- Как сделать картинку нужного размера
- Как растянуть фоновую картинку
- Как сделать фотографию длиннее
Вам понадобится
- Соединение с Интернетом, страница с картинкой, HTML-коды изображения.
Инструкция
Откройте нужную картинку. Внимательно изучите код страницы и картинки, в котором прописаны все ее размеры – высота, ширина.
Измените в коде, указывающем ширину картинки, имеющиеся цифры на проценты, например, замените width=«277» на width=«90%». Проценты в данном случае обозначают, насколько сильно будет растянута картинка после ее преобразования.
Выполните аналогичные действия с кодом, определяющим высоту картинки, например, установите, вместо цифр параметр height= «80%».
Сохраните все произведенные изменения.
Видео по теме
Обратите внимание
Выбирайте процент растягивания в зависимости от специфического строения web-страницы, но при этом в обязательном порядке ориентируйтесь на таблицу, в которой находится изображение. Целесообразно сверить готовый результат на нескольких мониторах. Это позволит избежать неприятного искажения изображения.
Полезный совет
Данный метод растягивания изображения позволяет настроить картинку с учетом разрешения экрана конкретного монитора компьютера и структуры страницы того или иного сайта.
- Советы о том, как изменить размер картинки.
Совет полезен?
Статьи по теме:
- Как сделать аватарку больше
- Как увеличить размер в фотошопе
- Как изменить изображение в масштабе
Добавить комментарий к статье
Похожие советы
- Как увеличить маленькое фото
- Как в Фотошопе увеличить картинку
- Как сделать длинное фото
- Как увеличить изображение в фотошопе
- Как увеличить фото без потери качества
- Как увеличить фото в «Фотошопе» без потери качества
- Как увеличить размер рисунка
- Как увеличить фотографию в фотошопе
- Как сделать фоновый рисунок на весь экран
- Как увеличить фото и сохранить изменения
- Как сделать длинную аватарку
- Как изменить размер нескольких фотографий
- Как редактировать картинку в Word
Предыдущая запись