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

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

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

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

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

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

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

3 Комментарии

  1. Помогите пожалуйста .Создал сайт а он выходит за границы браузера .На моём компе он выходит нормально.Как сделать так, что бы он везде выходил нормально? вот адрес сайта http://www.tagirovtm.ru. Ответы пришлите пожалуйста на мою почту tagirovtm@mail.ru.

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*