Изображения
Документация и примеры для настройки изображений на адаптивное поведение (чтобы они никогда не становились больше, чем их родительские элементы) и добавления к ним легких стилей — все через классы.
Адаптивные изображения
Изображения в Bootstrap сделаны адаптивными с помощью .img-fluid . Это применяет max-width: 100%; и height: auto; к изображению так, чтобы оно масштабировалось вместе с родительским элементом.
Эскизы изображений
В дополнение к нашим утилитам border-radius Вы можете использовать .img-thumbnail , чтобы придать изображению округлую границу в 1 пиксель.
Выравнивание изображений
Выровняйте изображения по вспомогательным классам с плавающей точкой или классам выравнивания текста. Изображения уровня block можно центрировать с помощью утилиты класса поля .mx-auto .
Картина
Если Вы используете элемент <picture> для указания нескольких элементов <source> для определенного <img> , убедитесь, что Вы добавили классы .img-* в <img> , а не в тег <picture> .
Изображения
Документация и примеры приведения изображений к отзывчивому поведению (так, чтобы их размер не выходил за рамки родительского элемента) и добавления к ним «легковесных» стилей – всё посредством классов.
Отзывчивые изображения
Изображения в Bootstrap делаются «отзывчивыми» с помощью .img-fluid . max-width: 100%; и height: auto; применяемых к изображению, которое т.о. масштабируется по родительскому элементу.
Изображения SVG и IE10
В IE10 SVG-изображения с классом .img-fluid выглядят диспропорционально. Для решения этой проблемы добавьте width: 100% \9; где необходимо. Это решение затрагивает и размеры изображений других форматов, поэтому Bootstrap не применяет его автоматически.
Мини-версии изображения
В дополнение к нашим утилитам бордер-радиуса вы можете использовать класс .img-thumbnail для придания изображению границы 1px.
Выравнивание изображений
Выравнивайте изображения вспомогательными классами выравнивания по стороне или классами выравнивания текста. Блочные изображения block можно центрировать использованием класса утилиты «марджина» the .mx-auto .
Картинка
Если вы используете элемент <picture> для привязки множественных элементов <source> к определенному <img> , добавьте классы .img-* в <img> , а не в <picture> .
Средства Bootstrap для оформления изображений
Так как Bootstrap предназначен для создания адаптивных сайтов, то изображения при построении такой сетки не должны выходить за пределы своего блока (элемента, в который каждое из них помещено).
Чтобы сделать изображения гибкими к ним нужно добавить специальные классы этого фреймворка:
- img-responsive в Bootstrap 3;
- img-fluid в Bootstrap 4.
После этого, размеры изображения будут уменьшаться, если его ширина будет больше ширины элемента, в котором оно находится.
Эти классы на самом деле выполняют очень простые действия, они применяют к изображению CSS-свойства max-width:100% и height:auto .
При необходимости можно не добавлять этот класс к каждому изображению, а выполнить это с помощью CSS. Для этого нужно в свой файл CSS внести одно из следующих CSS-правил:
Если необходимо сделать не все изображения на странице гибкими, а только те, которые расположены в определённом блоке, то в этом случае это необходимо определить с помощью CSS-селекторов:
При необходимости изображениям можно задать определённый размер. Осуществляется это с помощью стандартных атрибутов width и height :
При таком сценарии изображение останется гибким, т.е. его размеры не будут превышать максимальной ширины блока, в котором оно находится.
Классы для изменения формы изображения и задания тени
В Bootstrap 3 и 4 имеются классы, с помощью которых изображение можно заключить в рамку ( img-thumbnail ), скруглить ему углы (в Bootstrap 3: img-rounded , в Bootstrap 4: rounded ), или представить его в форме круга (в Bootstrap 3: img-circle , в Bootstrap 4: rounded-circle ).
Кроме этого, в Bootstrap 4 ещё имеются классы, с помощью которых вы можете добавить к изображению тень.
Классы для выравнивания изображений
Изменить положение изображения в Bootstrap можно с помощью утилитных классов:
- в Bootstrap 3: pull-left , pull-right , center-block , text-left , text-center и text-right ;
- в Bootstrap 4: float-left , float-right , mx-auto d-block , text-left , text-center и text-right .
Первые два класса как в первом, так и во втором списке предназначены для выравнивания изображения посредством задания ему CSS-свойства float со значением left или right .
Установка изображению center-block (Bootstrap 3) или mx-auto d-block (Bootstrap 4) предназначено для выравнивания изображения по центру. Эти классы задают изображению блочное отображение, а затем выравнивают его через margin-left: auto и margin-right: auto .
Классы text-left , text-center и text-right предназначены для выравнивания изображений, которые отображаются на странице только как строчно-блочные ( display: inline-block ) элементы. Для этого изображение необходимо поместить в элемент, например, div и добавить к нему один из этих классов.
Варианты оформления изображений
В этом разделе рассмотрим примеры оформления изображений с помощью CSS.
1. Пример, в котором показано как можно разместить текст поверх изображения.
В этом примере для размещения текста поверх изображения используется техника совместного использования относительного и абсолютного позиционирования. Познакомиться с методами позиционирования элементов в CSS можно в этой статье.
2. Рамка для изображения с использованием CSS-свойств border , outline и outline-offset .
3. Изображение, стилизованное с использованием CSS-свойств border и box-shadow .
4. Изображение, оформленное с помощью CSS-свойств border и box-shadow .
5. Пример, в котором показана CSS3 техника для установки фонового изображения на весь экран.
6. Пример, в котором элементу установим фоновое изображение.
Установка изображения в качестве фона в Bootstrap выполняется средствами CSS. Для этого используется свойство background-image или background .
Изображение применять в качестве фона рекомендуется только в том случае, если оно не является частью контента, а используется только для оформления.
Комментарии: 44
Не нашел подходящего ответа в поиске, спрошу десь.
Есть странички, на которых картинки 2х видов, вертикальные и горизонтальные ( https://roomflow.top/why-brown-is-the-color-taking-over-interiors-in-2023.html , https://roomflow.top/a-room-with-wood-walls-cozy-and-inviting-dcor-ideas.html ), можно ли добиться как-то одним css без изменений имени классов что бы вертикальные картинки не были бы слишком высокие, при этом горизонтальные картинки не были слишком мелкими).
Что я только не пробовал, либо одна слишком большая а вторая норм, либо первая норм а вторая слишком мелкая.
зы. Как вы сделали так, что бы у вас гугл поиск был без рекламы? Я когда ставил формы то первые сообщения это реклама.
Можно попробовать max-width и max-height :
При необходимости можно ещё сочетать это с @media , чтобы на разных экранах настроить эти свойства по-разному.
так я тоже делал, только вы усложнили, ну что бы по центру все было.
в таком варианте , как я уже писал выше, получается что горизонтальное изображение смотрится отлично, а вот вертикально слишком мелкое. эх, видимо решения нет, раз уж вы не знаете как это решить.
Смысл данной технологии (Client Hints) заключается в том, чтобы послать серверу в составе запросов для получения изображений дополнительную информацию (DPR, Width, Viewport-Width — т.е. плотность пикселей экрана, его ширину и ширину viewport). Добавляется Client Hints в браузер легко посредством вставки в раздел head следующего тега:
После этого браузер в заголовочную информацию запроса для каждой картинки будет включать эти данные. Но это действие пока делает только браузер Chrome.
Самое сложное — это сервер. Получив такой запрос на сервере, вы должны его как-то обработать. Иначе в Client Hints не будет смысла. Т.е. необходимо написать серверный скрипт, который например, будет искать подходящую картинку по этим параметрам, и отдавать её клиенту (браузеру). А если картинки с нужными параметрами нет, то, например, её генерировать из исходного файла.
Т.е. как-то так. Жертвуя одним (процессорным временем и дисковым пространством) — вы получаете взамен что-то другое, в данном случае более быструю загрузку изображений (т.к. они будут отдаваться сервером в более оптимальном разрешении).
Но можно получить и обратный эффект (более долгую отдачу страниц), например, если вы используете виртуальный хостинг и процессор «слабенький» (или нагружен сильно).
Images
Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
Responsive images
Images in Bootstrap are made responsive with .img-fluid . This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
Image thumbnails
In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.
Aligning images
Align images with the helper float classes or text alignment classes. block -level images can be centered using the .mx-auto margin utility class.
Picture
If you are using the <picture> element to specify multiple <source> elements for a specific <img> , make sure to add the .img-* classes to the <img> and not to the <picture> tag.