Как сделать картинку в строчку

Как сделать картинку и текст в одну строку?

Здравствуйте, подскажите как сделать так же, как на картинке?
Верстаю на bootstrap 4

 
Отзывы
 
 
 
 
 
Ксения Волкова
 
ученик
 
Очень понравились преподаватели в школе, профессионалы своего дела. Учиться у них удовольствие! Спасибо вам.





 
 
 
 
 

#otzyvy .container

То, что получилось у меня

• Вопрос задан более трёх лет назад
• 115 просмотров

Как расположить картинки в одну строку?

Нужно расположить картинки в один ряд с сохранением пропорций, одинаковой высотой и заданной шириной ряда.

Т.е. имеется родительский блок div с шириной 700px. В нем нужно расположить в один ряд, скажем, 4 картинки так, чтобы этот ряд растянулся на всю ширину родительского дива. Высота у картинок должна быть однинаковой. Пропорции должны сохраняться.

В качестве примера можно посмотреть как располагаются картинки на vk.com

• Вопрос задан более трёх лет назад
• 6505 просмотров

Как вставить картинку в текст на сайте

На что первым делом обращает внимание читатель текста? На вставленные в текст картинки! Поэтому на странице обязательно должны быть красивые фотографии и иллюстрации.

Перед тем как вставить на сайт картинку, подготовьте ее к публикации. Слишком большую картинку уменьшите до нужных размеров или обрежьте. При необходимости осветлите или затемните ее, уберите красные глаза или лишние надписи. Все эти изменения делаются в любом графическом редакторе.

Когда картинка готова, добавим ее к тексту. Это делается и при создании новой страницы, и при редактировании уже созданной.

Найдите в тексте место, в которое хотите поместить изображение, и кликните там мышкой.

Затем нажмите иконку «Вставить изображение» (она сделана в виде фотокарточки со знаком плюса).

У вас появится окно, через которое вы будете вставлять картинку. Найдите в нем кнопку «Выбор на сервере» и нажмите на нее.

При клике вы попадете в библиотеку ресурсов — виртуальное хранилище данных. Сначала вам нужно будет добавить изображение в эту библиотеку.

Когда вы добавили картинку в библиотеку ресурсов, найдите ее в списке. Нажмите справа от нее на кнопку «Вставить».

Картинка появится в окне.

Осталось придумать для нее оформление. Оно указывается в специальных полях.

Граница показывает в пикселях толщину рамки, в которой будет опубликовано ваше изображение. Если в этом поле ничего не писать, то рамка показываться не будет. Если написать 3 — то рамка будет в три пикселя толщиной. Цвет рамки зависит от выбранной вами цветовой темы сайта.

Горизонтальные и вертикальные отступы — расстояние в пикселях, на которое картинка будет удалена от текста. Если для вертикального отступа указано 5, то по вертикали между картинкой и текстом будет 5 пикселей. Если для горизонтального отступа указано 10, то по горизонтали между картинкой и текстом будет 10 пикселей. Если ничего не указывать, то картинка «прилипнет» к тексту вплотную.

Выравнивание позволяет выбрать, как текст будет обтекать вашу картинку — справа или слева. Если вы хотите, чтобы ваша картинка не обрамлялась текстом, а стояла отдельно от него, то оставьте в этом поле значение «Не указано».

Для любой картинки можно добавить описание — оно подскажет поисковым системам, что именно на ней изображено. Кроме того, это описание помогает индексации сайта в целом. Занести его можно в поле «Альтернативный текст».

Когда оформление завершено, нажмите кнопку «ОК».

Изображение будет добавлено в текст.

Теперь сохраните страницу с картинкой, нажав на кнопку «Сохранить» внизу.

После этого в тексте на сайте появится добавленная картинка или фотография.

• Как создать сайт самостоятельно
• Работа со страницами
• Наполнение страниц
• Работа с изображениями и файлами
• Фотогалереи
• Новости
• Каталог товаров
• Интернет-магазин
• Формы обратной связи
• Виджеты
• Функции продвижения
• Доступ в систему управления
• Внешние сервисы
• Дизайн

Как разместить в ряд три изображения в квадратных областях

В итоге должно получиться что-то типа этого:

Отслеживать
задан 27 мая 2015 в 10:47
362 1 1 золотой знак 2 2 серебряных знака 14 14 бронзовых знаков
Перенесите дополнения из комментариев в сам вопрос. Вопрос должен быть самодостаточным.
27 мая 2015 в 21:25

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

div < background: #737373; float: left; position: relative; width: 30%; padding-bottom: 30%; margin: 1.66%; >div:hover < background: black; >img

Отслеживать
ответ дан 29 мая 2015 в 20:19
27.6k 5 5 золотых знаков 35 35 серебряных знаков 66 66 бронзовых знаков
Да, это то, что было нужно! благодарю Вас!
30 мая 2015 в 4:43

Навскидку — 3 дива у которых ваши изображения — это бекграунд. задайте жестко стороны дивов — и пропорции не сломаются. также можно прописать background-size: contain

опишите подробнее , какое должно быть поведение картинок при расширении / сужении экрана

Отслеживать
ответ дан 27 мая 2015 в 10:56
85 1 1 серебряный знак 12 12 бронзовых знаков
При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться.
27 мая 2015 в 11:03

Жестко это в пикселях? Тогда надо будет через js менять стиль. Или я могу в css менять высоту при изменении ширины?

27 мая 2015 в 11:04

При изменении ширины экрана картинка должна оставаться квадратной и масштабироваться я так понимаю, в таком случае, эти картинки должны меняться и по высоте ? или должно увеличиваться между ними расстояние ? ТОгда так codepen.io/anon/pen/ZGBmYJ

27 мая 2015 в 13:17

При изменении ширины экрана картинки должны тоже изменяться по высоте и ширине, оставаясь квадратными.

27 мая 2015 в 16:36

Вообще правильно это делать при помощи img и какого-нибудь wraper’а. Я просто модифицировал свой пример. Написал небольшой скриптик c использованием jQuery:

$(window).resize( function() < var cw = $('.figure').width(); $('.figure').css(); > ); 

Отслеживать
ответ дан 27 мая 2015 в 12:37
Astemir Almov Astemir Almov
193 8 8 бронзовых знаков

Пишу приложение на ionic. JQ туда вставлять не хочется, ведь там есть AngularJs. Хотелось обойтись чистым css.

28 мая 2015 в 9:57

Окей. Сейчас будем вспоминать как это сделать при помощи чистого CSS. Вы хотите, чтобы изображения масштабировались по высоте и ширине при изменениях размеров окна?

28 мая 2015 в 10:06
Да, именно так.
29 мая 2015 в 12:33
Не нужны скрипты для этой задачи.
29 мая 2015 в 20:50

Я бы посоветовал использовать какой нибудь css framework, например bootstrap, тогда большинство стандартных вопросов с версткой отпадут сами по себе, так как большинство классов уже готовы к использованию и их просто нужно использовать(Про сетки) , если же нужен ответ на Ваш попробуйте его задать более раскрыто, что бы не всплыли подводные камни.

Отслеживать
ответ дан 27 мая 2015 в 13:13
Kristofer Sanders Kristofer Sanders
1 1 1 бронзовый знак

• html
• css
• вёрстка
• адаптивная-верстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420