Как сделать, чтобы картинка не выходила за границы блога

Иногда мы публикуем изображения, которые шире, чем блог. Такое изображение выходит за границы блога и смотрится некрасиво. Для того, чтобы изображение никогда не выходило за границы блога, можно подстраховать себя.

В файле CSS нужно задать максимальный отображаемый размер для изображений. Делается это примерно таким кодом:

.post img
{
  max-width: 500px;
}

Понятно, что 500 — это максимальная ширина колонки блога для постов. Высота в коде не ограничивается.

Единственным ограничением являются сами браузеры, отображающие изображения — в разных браузерах он отображается по-разному. Например, IE отображает уменьшение картинки корректно, то есть уменьшает ее пропорционально. То же можно сказать и про Google Chrome и Opera. А вот всеми любимый Firefox так и не научился до сих пор уменьшать картинки, соблюдая пропорции, поэтому он уменьшает только ширину, и картинка получается вытянутой по вертикали. Ну будем надеяться, что разработчики этого столь популярного браузера научат его пропорциональности.