# 022: Imágenes Flexy (Figuras y capítulos de las figuras) - Trucos CSS

Anonim

Antes de hacer un trabajo de tipografía, pensé que arreglaríamos lo molesto donde las imágenes se reventan fuera del área del artículo y la cuadrícula. Usando algunas reglas CSS simples para anular los atributos y el estilo de la imagen en línea, podemos aplastar las imágenes para que quepan en nuestra publicación con el tamaño correcto.

Estrujar imágenes como esta solía ser bastante poco atractivo ya que los navegadores hicieron un mal trabajo al cambiar el tamaño, pero este ya no es el caso. En realidad, es una buena idea, ya que las pantallas obtienen una resolución más alta, ya que las imágenes serán más nítidas.

El cambio de tamaño se resuelve esencialmente mediante:

figure img ( max-width: 100%; height: auto !important; )

Diseñamos las figuras y los capítulos de las figuras solo un poco para que se vean, ya sabes, como una figura adecuada en una publicación de blog.