Вписать картинку в блок
Есть блок заданых размеров и нужно что бы в него вставлялись картинки(именно тегом img) так что бы если например картинка вертикальная она не растягивалась на всю ширину блока, а занимала нужную ей ширину и высоту по блоку. И если нужно например уменьшалась и вписывалась в блок. Это можно сделать средствами css или только с применение js/ Если есть какие то примері или сілки где можно узнать буду благодарен
Отслеживать
задан 4 июл 2018 в 12:29
Влад Лесной Влад Лесной
300 1 1 золотой знак 4 4 серебряных знака 16 16 бронзовых знаков
Для img пропишите height:100%; width: auto; Должно решить вопрос, если я правильно понял
4 июл 2018 в 12:36
Картинок в блоке может быть несколько?
4 июл 2018 в 13:26
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
var imgs = $('.box img'); imgs.each(function()< var item = $(this).closest('.box'); item.css(< 'background-image': 'url(' + $(this).attr('src') + ')', 'background-position': 'center', '-webkit-background-size': 'cover', 'background-size': 'cover', >); $(this).hide(); >); 
Отслеживать
ответ дан 4 июл 2018 в 12:44
22.4k 11 11 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков
Как в CSS вписать картинку (именно img) в блок?
Многие для вписывания картинки в блок используют background-image. Но есть один метод, который безболезненно и (почти) на всех браузерах поможет вам без лишних заморочек вписать img в div.
Делается этот хитрый трюк через padding-top и абсолютное позиционирование. Родительскому элементу указываем:
- height: 0;
- padding-top: 130%;
- position: relative;
- display: block;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-height: 100%;
- max-width: 100%;
В итоге картинка вытягивается по блоку с 0 высотой, а также изменяя padding-top (на 100% картинка вписывается в квадрат) мы можем изменять фигуру вписывания. А также можем через object-fit: cover сделать картинку замещаемой (но для ie11 нужно использовать полифил).
Результат на CodePen (правда там результат с object-fit: cover, но обратно превратить результат в вмещаемую картинку проще).
Как красиво вписать картинку в блок определенных размеров (если на входе картинки разного размера)?
Есть что-то типа админки. Пользователь грузит файл.
Во фронтенде надо его красиво вписать в квадрат, например, 100×100 (ну чтобы не поплыло все).
Картинки на входе могут быть разными, например:
50×170
120×300
(пользователей нельзя заставить самостоятельно обрезать или подгонять под нужный размер заранее)
- Вопрос задан более трёх лет назад
- 1365 просмотров
1 комментарий
Простой 1 комментарий
Как добавить изображение на страницу
Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги , или использовать в CSS с помощью background-image .
Вставка изображений в теге
Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.
�� Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.
Чтобы вставить изображение с помощью , нужно добавить в тег четыре обязательных атрибута:
- src — указывает путь до картинки;
- alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
- width — задаёт ширину изображения;
- height — задаёт высоту изображения.
С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px .
Вставка через
Для каких изображений подходит: для векторных в формате SVG.
С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.
Иконки добавляются с помощью тега , в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так:
Небольшое отступление. Возможно, вы не знакомы с классом visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.
Вставка через CSS
Для каких изображений подходит: для декоративных.
�� Декоративные изображения нужны для украшения страницы. Их отсутствие не поменяет смысл контента, поэтому они имеют только оформительское назначение.
Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.
Добавление фоновых изображений
Для добавления фоновых изображений используется CSS-свойство background-image . Вместе с ним нужно прописать размеры изображения — width и height .
Например, на странице есть контейнер с классом .image-container :
Чтобы задать ему фон, нужно написать следующий код:
.image-container < background-image: url("images/keks.jpg"); width: 600px; height: 400px; >Это минимальный набор CSS-правил. Часто фронтендеры используют дополнительные правила, чтобы изменить позицию и размеры изображения или запретить повтор фоновой картинки.
CSS-свойство background-attachment указывает, что делать с изображением: зафиксировать его позицию в области просмотра или пролистывать вместе с содержимым контейнера.
- scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
- fix — фон фиксируется.
- local — фон фиксируется с учётом содержимого элемента.
CSS-свойство background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px . Ключевые слова для расположения по оси X:
- right — право;
- left — лево.
Ключевые слова для расположения по оси Y:
- top — сверху;
- bottom — снизу.
Можно сочетать разные значения:
background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/ background-position: 50% bottom; /* фон будет посередине и снизу*/ background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/ Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y . Они принимают такие же значения, как и background-position .
Следующее CSS-свойство — background-repeat , оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat , то есть фоновое изображение повторяется по вертикали и горизонтали:
Чтобы изменить это поведение, надо поменять значение:
- no-repeat — не повторять изображение,
- repeat-x — повторять только по горизонтали
- repeat-y — повторять только по горизонтали.
CSS-свойство background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.
background-size: /*размер по ширине*/ /*размер по высоте*/ - auto — оставляет исходный размер изображения.
- contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
- cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.
Чтобы было понятнее, посмотрим на примере. Оранжевыми рамками выделена область контейнера. Когда мы задали свойство background-size со значением contain , картинка заполнила всю высоту контейнера и осталась целой.
А когда мы задали cover , фото Кекса обрезалось и растянулось на всю ширину контейнера.
Есть и другие CSS-свойства. Почитайте о них в спецификации W3C.
При использовании фоновых изображений обязательно добавляйте цветной фон-подложку, особенно если у вас на сайте белый текст. Это важно, ведь у пользователей может быть плохое интернет-соединение, при котором картинки долго загружаются. Тогда посетители сайта увидят белый текст на белом экране.
Использование псевдоэлементов
Небольшие декоративные элементы добавляются с помощью псевдоэлементов ::before и ::after . Эти псевдоэлементы создают внутри элемента псевдотег, который можно стилизовать. Например, вы можете добавить ему фоновое изображение или текст.
�� Этот псевдотег — виртуальный, вы не увидите его в разметке сайта.
Псевдоэлемент ::before добавляет псевдотег в начале, ::after — в конце. Вот пример использования псевдоэлемента на сайте HTML Academy. Перед вами блок с тремя тегами
. В каждом из них лежат для важных цифр и для обычного текста. Когда мы добавляем абзацу ::before , внутри
появляется ещё один псевдотег — с картинкой.
Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:
1507 Заданий и испытаний
.wrapper::before < content: ""; width: 600px; height: 400px; display: block; background-image: url("images/keks.jpg"); background-repeat: no-repeat; background-position: center; >Разберём, что мы делаем.
Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение «» .
Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.
Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.
Заключение
Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью , а красивую фоновую картинку можно вставить с помощью background-image .
Следуйте этому правилу, и пользователи полюбят ваш сайт.
Другие статьи о графике
- Как отличить контентное изображение от декоративного
- Растровая и векторная графика
- Как вставлять SVG
- Где скачать бесплатные фотографии для сайта
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.