Прежде чем мы поработаем над типографикой, я подумал, что мы исправим раздражающую вещь, когда изображения вылетают за пределы области статьи и сетки. Используя некоторые простые правила CSS для переопределения атрибутов и стиля встроенных изображений, мы можем сжать изображения, чтобы они соответствовали нашему сообщению с правильным размером.
Раньше сжимать изображения, подобные этому, было довольно не круто, поскольку браузеры плохо справлялись с изменением размера, но теперь это не так. На самом деле это хорошая идея, поскольку дисплеи получают более высокое разрешение, так как изображения будут более резкими.
С изменением размера в основном решаются:
figure img ( max-width: 100%; height: auto !important; )Мы немного стилизуем фигуры и подписи к фигурам, чтобы они выглядели, как вы знаете, как правильные фигуры в сообщении в блоге.