Как уместить изображение в блоке css

Центрирование изображения в блоке

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

Центровка изображения в блоке

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

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

Пример центровки изображений на сайтах

Чаще всего установка картинки на странице осуществляется пользователем сайта посредством административной панели пользователя. Этот вариант наиболее вероятен, особенно в тех случаях, когда речь идет о интернет-магазинах. Админка позволяет выгружать на сайт картинки любого размера и почти любого формата. Причем исходно прописываются максимальные размеры блока и картинки. Таким образом, после заливки изображения оно будет масштабироваться под нужный размер или обрезать лишние фрагменты. При рассмотрении последнего варианта, наиболее оптимальным будет, если картинка будет отцентрирована по вертикали и горизонтали.

Классическое решение

Суть общепринятого решения заключается на действии свойств text-align и vertical-align. На первый взгляд все кажется довольно просто и логично, однако это не совсем так.

Напоминаю, что свойство vertical-align работает только для текстовых контейнеров и ячеек таблицы. Из этого выходит, что нам необходимо проимитировать состояние ячейки для нашего блока. С этим поможет свойство display при использовании значения table-cell. Это позволит выровнять картинку по центру по вертикальной оси. Горизонтальную центровку можно обеспечить через text-align.

Существенная проблема и сложность данного способа заключается в том, что всеми любимый Internet Explower не может корректно работать со значением table-cell. Поэтому требуется прописывать дополнительно expression для реализации метода.

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

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

Альтернативное решение

Есть другой путь для реализации поставленной задачи, однако этот способ не соответствует требованиям семантики. Можно выводить картинку через CSS-свойство background, в котором указать расположение картинки как "center center". Это противоречит семантическим правилам, согласно которым логически значимая картинка должна выводится через тег img.

Ниже приведен код нашего альтернативного решения

В результате использования первого либо второго метода получим один и тот же результат в браузере

Отображение результатов центровки в браузере

При использовании последнего метода опытные программисты выносят код с фоновой картинкой в HTML-документ. Это позволяет ориентироваться в документе и быстро найти блок с картинками. А выглядит это следующим образом:

Плюсы и минусы метода

В сравнении с классическим вариантом, альтернативный вариант обладает следующими преимуществами:

  • убираются какие-либо ограничения с родителя (имеется ввиду определенное позиционирование или эффект обтекания), которые необходимы для оптимальной работы метода;
  • исключается использование expression;
  • не требуется для родительского блока прописывать свойство overflow с соответствующим значением, чтобы обрезать большие картинки;
  • минимизация количества строк кода.

Однако в тоже время метод имеет несколько недостатков:

  • не соблюдение семантических правил;
  • нерешенность вопроса по определению размера изображения.

Подводя итог

Альтернативный способ не рекомендуется использовать, так как соблюдение семантики является очень не мало важным фактором при верстке веб-страницы. Однако, перечень преимуществ перед классическим способом заставляет задуматься.

Как масштабировать изображения в CSS

Огни большого города https://obg.kz

Всяко лучше отдать это на откуп браузеру. И решена главная проблема, свойственная для «изображений, заполняющих пространство» — невозможности выбора части, задающей смысловую нагрузку (не говоря о том, что это иногда невозможно).

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

Спасибо, Андрей! Мне этот способ тоже очень понравился, теперь буду широко его применять. Удобно и универсально.

Александр, первое, что пришло в голову – автоматическая массовая обработка имеющихся картинок в графическом редакторе, даже при тысячах картинок это вряд ли заняло бы времени больше, чем один рабочий день. Но через CSS – изящней. Единственное, что сразу бросилось в глаза при просмотре сайта – недостаточная высота контейнера под картинку и текст, больше двух строк уже не помещается. Просматривал через Файрфокс.

Мессенджер на сайте – от jivosite на платном тарифе? Или другой?

Константин, через Файерфокс и работаю… У меня это выглядит так:

Картинка кликабельна…

Но за инфу спасибо, в понедельник увеличу размер текстового блока.

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

…автоматическая массовая обработка имеющихся картинок в графическом редакторе, даже при тысячах картинок это вряд ли заняло бы времени больше, чем один рабочий день

Была и такая мысль, но кто этим будет заниматься? Дизайнерша у нас сейчас одна и работы у неё завал, мне тоже не до этого – постоянно какие-то новые функции в программах надо писать, вся фирма работает на моей торговой программе, да и другого софта написано немало, всё востребовано, необходимо поддерживать, обновлять…

Живосайт на платном тарифе, тут несколько больше возможностей. Хотя долгое время сидели на бесплатном – тоже нормально, но одновременно может только один оператор быть.

На внутренние страницы я тоже заходил, там все замечательно ) А с Живосайтом на ИМ, который делал, не сложилось – заходы есть, вопросов нет ) Возможно, людям проще набрать телефонный номер, или сразу оформить онлайн-заявку, не знаю. Но в итоге от мессенджера на сайте отказались, чтобы не нервировал посетителей лишний раз )

Ну вроде подправил всё. Сегодня ночью очередное обновление выгрузится. По Живосайту – там же можно настроить всплывать или нет и при каких условиях. У нас много вопросов бывает, по три оператора одновременно сидят… Но бывает, что и затишье.

Саша, привет! Интересный способ, спасибо за науку. Правда не знаю воспользуюсь ли, но знать буду это точно

Ну поскольку ты сам делаешь шаблоны, то может и пригодиться… Способ отличный.

Всё таки это мужская работа – коды всякие! Половину не поняла…
Но почитать было интересно! Наверное, некоторые с таким же чувством читают мои статьи по здоровью… 🙂

Ну почему мужская? А как же эмансипация? А про здоровье, думаю, что каждый понимает только про свою болячку… Так, что у тебя вариантов быть понятой больше…

Ну, Галина, со здоровьем все проще

Лидия, Вы просто не писали по всех правилах статью по здоровью для вывода в топ! Это не сравнить ни с одной тематикой по величине текста при ПОЛНОМ раскрытии темы и если это НЕ рерайт! Я это знаю не понаслышке, так как у меня не один блог…

Саша, спасибо за background-size: contain; мне сразу это бросилось в глаза, я раньше ни у кого не видел такого обозначения размера, а вот cover встречался, но я не вникал в его функциональность, за ненадобностью. Пост классный получился и интересный, по крайней мере, для меня. Спасибо!

Миш, тут ведь как? Я ведь тоже сто раз проходил мимо и не вникал за ненадобностью… А вот возникла проблема и поиск ткнул меня носом в это решение. Ещё даже не поняв суть, я уже почувствовал – вот оно, то, что мне надо! Всю информацию просто невозможно вместить в голове. Мы её подгружаем по мере необходимости…

Привет, Саш! Вот и моя очередь подошла заниматься масштабированием картинок. Вопрос вот какой, как бы мне сделать, чтобы картинки в постах, особенно первые, масштабировались по ширине (по одной из сторон, например: 150px, но при этом, увеличивались бы при клике по ним?

Занялся оптимизацией картинок на Садоводстве, а мне сканер вот такую задачку задал, мол, нужно масштабировать в HTML и CSS. Вспомнил про тебя и твой вот этот пост. Но как бы мне сделать чтобы настройка действовала на все картинки сайта, а не только в таблице/блоке.

Есть что сказать?

Миш, думаю что-то можно сделать при помощи css… В том классе, который отвечает за изображение в постах прописать что-то типа max-width:150px;

Спасибо Саша, пожалуй, так и сделаю. У меня там изначально 100% и auto (стандарт). Посмотрю, что скажут сканеры на этот приём. Я попробовал через firebug 250px. В вёрстке темы вписано отображение картинки справа через определённое кол-во анонсов, т.ч. меньше 250px получается некрасиво, это нужно лезть отступы текста менять. Вообщем, глянем, спасибо за подсказку!

Саш, я попроще… Загляни, если не трудно, на sadvin.ru На главной странице изображения все разного размера визуально. Вот я и вспомнил твою статью о масштабировании. Хочу сделать, чтобы на главной все картинки были масштабированы, как ты предлагаешь по ширине 150 пикселей и высоте к примеру, 180 рх, а на странице поста я обычно уменьшаю за уголок до 550 рх по ширине, а увеличивает их до оригинала плагин.

Честно говоря, я так до конца и не понял твоей задачи… Разве изображения в статьи ты не руками вставляешь? Можно ведь просто за уголок потянуть и изменить размер на любой, нужный тебе. При этом само изображение не изменится, только его отображение…

Да, именно так всё и происходит, причём, картинка не из библиотеки, а только ссылка с хранилища. Но, картинки имеют большой размер и сканер читает именно его, а не отображаемый. У меня же в настройках Медиа все нули стоят, а сканеру это не нравится видимо и мне говорит, что нужно картинки оптимизировать, указывая чаще на те картинки, которые отображаются в анонсах. Ну вот например:

_THQ05aTyc1iCD9yqwCM9kvouM5O0ea7g…
DqoPpK6juu7s=w300-h358-no?.jpg изменяется в HTML или CSS от 300×358 до 100×119.
Обслуживая масштабируется изображение может сохранить 16.1KiB (снижение 88%).

Странно… А у меня сканнер на сторонние картинки вообще внимания не обращает. Видимо дело в том, что мои сервисы хранения картинок уже сами сжимают их при загрузке, не меняя размеров. Так делал и Радикал, но сейчас я им не пользуюсь, но вроде так делает и postimage.org , которым пользуюсь в настоящее время. Он, кстати, отдаёт картинки по https, что для меня очень важно…

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

Миш, у меня все картинки там. Чем мы, блогеры, не семья?

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

Если ты о закрытии автора, то заглянул и ответил… У меня на это несколько иной взгляд..

Спасибо, Саш! Мне было важно твоё мнение! Теперь у меня закрался вопрос, что же открывает эта ссылка? Возможно когда-нибудь я и отвечу себе на этот вопрос.

Мне кажется, что моя версия правильная…

Солидарна с Галиной, хотя не считаю, что писать коды – это только мужская работа, некоторые женщины в этом тоже хорошо разбираются, я правда не из их числа. К сожалению css, html-коды для меня тёмный лес, сама ничего не придумаю, разве что при необходимости чужой совет применю на сайте.

Кстати, как раз хочу спросить совета по поводу изображений. Может, кто с этим тоже столкнулся. После обновления Wordpres до версии 4.5. появились проблемы с загрузкой изображений в библиотеку медиафайлов и соответственно в запись. Выскакивает вот такая ошибка: "Во время загрузки произошла ошибка. Пожалуйста, повторите попытку позже". А позже тоже самое. Но через время в библиотеке появляется изображение только без миниатюры. Уже из библиотеки изображение можно вставить в запись, правда миниатюра фотки в рубриках так и не появилась. Функция вставки изображений с другого сайта работает без проблем. Но этот вариант для получения миниатюр в анонсах и рубриках не подходит.

Валентина, вот не подскажу ничего – у меня таких проблем нет. Хотя WordPress обновил. Единственное, что приходит в голову – это то, что обновление как-то криво установилось. Попробуйте переустановить. Это можно сделать прямо из консоли:

Вписать картинку в блок

Есть блок заданых размеров и нужно что бы в него вставлялись картинки(именно тегом img) так что бы если например картинка вертикальная она не растягивалась на всю ширину блока, а занимала нужную ей ширину и высоту по блоку. И если нужно например уменьшалась и вписывалась в блок. Это можно сделать средствами css или только с применение js/ Если есть какие то примері или сілки где можно узнать буду благодарен

Ответы (3 шт):

Все зависит от того вертикальная картинка или горизонтальная. Если горизонтальная, то необходимо: width: 100%; height: auto , если вертикальная, то height: 100%; width: auto . Вам необходимо только с помощью javascript определить, какого формата картинка и присвоить соответствующие стили

Есть такое свойство, как object-fit: cover; оно позволяет <img> занимать всё пространство родителя, растягивая изображение без потери пропорций.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *