Antes de fazermos algum trabalho de tipografia, pensei que poderíamos consertar a coisa chata onde as imagens estão explodindo fora da área do artigo e da grade. Usando algumas regras CSS simples para substituir os atributos e o estilo da imagem embutida, podemos espremer as imagens para caber em nossa postagem no tamanho correto.
Esmagar imagens como essa costumava ser bastante desagradável, pois os navegadores faziam um péssimo trabalho de redimensionamento, mas esse não é mais o caso. Na verdade, é uma boa ideia, pois os monitores estão ficando com resolução mais alta, pois as imagens serão mais nítidas.
O redimensionamento é essencialmente tratado por:
figure img ( max-width: 100%; height: auto !important; )Nós estilizamos as figuras e figcaptions um pouco para que pareçam, você sabe, uma figura adequada em um post de blog.