У меня есть типичная строка «точек продажи медиаблока» с изображениями вверху и текстом внизу. В настоящее время я использую flexbox, чтобы все было в порядке, но в конечном итоге я создам запасной вариант (возможно, ячейки таблицы или встроенный блок). Дело не в этом (на самом деле flexbox ПОТРЯСАЮЩИЙ).
Пример: http://drwoe.nl/
Моя проблема заключается в следующем: два изображения имеют одинаковую ширину и высоту. Представьте себе круги с нарисованным персонажем внутри них. Третье изображение имеет круг такой же высоты и ширины, но изображенный персонаж «вырывается» из круга, увеличивая изображение.
Я применил к первым двум изображениям адаптивную обработку, и они хорошо масштабируются вместе. Чтобы третий отображался так, как хотел дизайнер, я должен указать минимальную ширину (по крайней мере), чтобы он соответствовал размерам кругов. Имеет ли это смысл?
Если бы мне не нужно было красиво изменять размер этих изображений, это не было бы проблемой. Но я не могу понять, как сохранить третье изображение, которое технически больше, чем два (из-за иллюстрации «прорыва»), изменяя размер вместе с ними.
У меня есть PSD проекта, и я могу вытащить нужные мне фрагменты. Я попытался создать круги CSS3 и добавить иллюстрацию в псевдоэлемент (абсолютное позиционирование), но я не смог заставить их изменить размер вместе.
Это настоящая головоломка или я упускаю что-то простое? Большое спасибо!
