Выравнивание изображений логотипов в CSS

От автора:как front-end разработчик, вы, возможно, работали над созданием раздела, содержащего логотипы брендов, клиентов, компаний, которые вы перечисляете. На первый взгляд эта задача может показаться простой, но она сопряжена с рядом трудностей, связанных с выравниванием и центрированием этих логотипов. Кроме того, некоторые логотипы выглядят горизонтальными, а некоторые — более вертикальными, не говоря уже о разном размере изображения для каждого.

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

Короткое введение

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

У меня есть восемь логотипов, которые мне нужно организовать в виде сетки, поэтому первое, что я сделал — это выделил их и перетащил на холст Sketch.

Я знаю, логотипы выглядят ужасно. Давайте это исправим! При выборе всех логотипов убедитесь, что ширина и высота заблокированы, и измените ширину или высоту на 150px.

Обратите внимание, что некоторые логотипы выглядят больше, чем другие? AirBnb является крупнейшим. Я обычно рисую прямоугольник для каждого логотипа, и этот прямоугольник поможет мне решить, лучший ли это размер, выравнивание и расстояние между логотипами.

Имейте в виду, что расстояние между прямоугольниками должно быть одинаковым. В Sketch вы можете легко сделать это, выбрав строку, и в верхнем правом углу нажмите Tidy и отрегулируйте расстояние. Это должно быть по крайней мере 10px. Теперь с прямоугольниками некоторые логотипы выглядят смещенными, большими или полностью непропорциональными. Я изменю размеры логотипов и расположу их по центру:

После изменения размера и выравнивания логотипов возникает проблема с Dropbox. Я сохранил прямоугольник, чтобы вы могли увидеть проблему. Во-первых, логотип горизонтальный (слишком длинный), а под ним белый фон. Мы можем удалить этот фон, обрезав логотип внутри Sketch.

Хорошо, теперь у нас есть аккуратный дизайн, готовый для реализации в HTML и CSS. Имейте в виду, что в следующем пояснении предполагается, что вы получили случайные логотипы от дизайнера без учета их размера.

Реализация сетки логотипов

Давайте рассмотрим, как реализовать логотипы в HTML и CSS, учитывая следующее:

<ul class="brands"> <li class="brands__item"> <a href="#"> <img src="img/logo.png" alt=""> </a> </li> <li> <!-- other logos --> </li>
</ul>

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

.brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-gap: 1rem;
} .brands__item { background: #eee;
} .brands__item img { display: block; /* Make sure max-width is added */ max-width: 100%;
}

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

.brands__item img { display: block; /* Make sure max-width is added */ max-width: 100%; width: 100px;
}

width сработало для некоторых логотипов. Тем не менее, логотип Dropbox серьезно ухудшился, так как это горизонтальный логотип. Прежде чем перейти к другим решениям, давайте попробуем использовать height.

.brands__item img { display: block; /* Make sure max-width is added */ max-width: 100%; height: 70px;
}

К сожалению, логотип Dropbox растянут по высоте. Почему? Ну, высота логотипа относительно мала по сравнению с другими логотипами, поэтому значение height, которое я указал, слишком велико для него, что привело к растяжению, которое вы видите. Мы можем решить это, используя для изображения object-fit.

.brands__item img { /* Other styles */ object-fit: contain;
}

Пока я остановлюсь на решении с width. Следующий шаг — центрировать логотипы по горизонтали и вертикали.

.brands__item a { display: flex; justify-content: center; align-items: center; height: 100%;
}

В стилях flexbox логотипы центрированы. Вот как они выглядят:

Обратите внимание, что логотип Dropbox выглядит очень маленьким. Ну, похоже, width не сработало. Что мы можем сделать дальше? Другой подход, который я попробовал, и он сработал лучше — это объединить и width, и height, но разве это не растянет или не сожмет логотип? Да, это будет так, если вы не используете object-fit: contain.

.brands__item img { width: 130px; height: 75px; object-fit: contain;
}

Самое замечательное в том, что object-fit: contain независимо от того, каковы ширина или высота, логотип содержится внутри них, не искажаясь.

Обновление: 26 июня 2020 г.

Я добавил @supports для определения поддержки свойства object-fit. Если браузер поддерживает его, оно будет добавлен вместе с height. Это сделано для того, чтобы избежать растягивания логотипов в браузерах, которые не поддерживают object-fit. Спасибо Луи за отзыв.

Чтобы убедиться, что техника работает отлично, я попробовал протестировать ее с другим набором логотипов, и результат был отличным!

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

Использование режима смешивания CSS для удаления белого фона

Благодаря серому фону мы можем заметить, что некоторые логотипы являются изображениями в формате JPG, поэтому под ними находится белый фон. Если вы не можете получить прозрачную версию логотипа, вы можете использовать mix-blend-mode. Это удалит белый фон, как по волшебству.

.brands__item img { width: 130px; height: 75px; object-fit: contain; mix-blend-mode: multiply;
}

И готово! Теперь белый фон исчез. Тем не менее, стоит отметить, что этот эффект может сделать некоторые логотипы более темными по цвету, как, например, Макдональдс.

Обновление: 26 июня 2020 г.

В этом твите, Кристофер предложил использовать селекторы атрибута, чтобы применить mix-blend-mode только к .jpg и .png изображениям.

.brands__item img[src$='.jpg'],
.brands__item img[src$='.png'] { mix-blend-mode: multiply;
}

Центрирование последней строки логотипов

Вы не можете гарантировать, что последний ряд логотипов всегда будет завершен. В результате, наличие пустой области (как и в предыдущих примерах) может быть недостаточно. Для центрирования последней строки рекомендуется использовать flexbox вместо CSS-сетки.

.brands { display: flex; flex-wrap: wrap; justify-content: center;
} .brands__item { flex: 0 0 50%;
} @media (min-width: 700px) { .brands__item { flex: 0 0 33.33%; }
} @media (min-width: 1100px) { .brands__item { flex: 0 0 25%; }
}

При этом последний ряд логотипов будет центрирован. Смотрите рисунок ниже:

Заключительные советы

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

Автор: Ahmad Shadeed

Источник: https://ishadeed.com

Редакция: Команда webformyself.