Sebelum kita melakukan beberapa pekerjaan tipografi, saya pikir kita akan memperbaiki hal yang mengganggu di mana gambar-gambar itu keluar dari area artikel dan grid. Dengan menggunakan beberapa aturan CSS sederhana untuk mengganti atribut dan gaya gambar sebaris, kita dapat memadatkan gambar agar sesuai dengan posting kita dengan ukuran yang benar.
Squishing gambar seperti ini dulu agak tidak keren karena browser melakukan pekerjaan yang buruk dalam mengubah ukuran, tetapi sekarang tidak lagi. Ini sebenarnya merupakan ide yang bagus karena layar mendapatkan resolusi yang lebih tinggi, karena gambar akan lebih tajam.
Pengubahan ukuran pada dasarnya ditangani oleh:
figure img ( max-width: 100%; height: auto !important; )Kami sedikit mengubah gaya gambar dan figcaption agar terlihat, seperti gambar yang tepat di postingan blog.