thumb horiz middle 01

Можно использовать свойство width и height, можно задать только ширину, высота подстроится автоматически. Если задать ширину и высоту, не пропорциональные оригинальным - возникнут искажения.

Размер лучше задавать не самому изображению, а содержащему контейнеру. Контейнером может быть блок div, параграф p и др.

<!-- вывод изображения -->
<div class="item-image">
  <img src="pic.jpg" alt="text" />
</div>
 
/* Код css. Задаем размеры содержащему контейнеру */
.item-image {
  width: 220px;
  max-width: 30%;
}
.item-image img {
  width: 100%;
  height: auto;
}

Значение max-width задано для того, чтобы при выводе контента в несколько колонок, в боковой колонке, или просто сужения ширины, размер картинки автоматически уменьшался. Это избавляет от необходимости создавать дополнительные стилевые правила, в зависимости от ширины колонки.

Предупреждение

Можно задать размер выводимого изображения, но нужно знать, что на самом деле на страницу загружается оригинал! Т.е. картинка исходных размеров соответствующего веса.

Поэтому, если вы задали ширину выводимого изображения 220px, а страница долго загружается, то стоит проверить размер исходника, возможно он большого разрешения и весит 1 Mb ...

Выравнивание и отступы

Три варианта стандартного расположения изображения - слева, справа, по центру. Можно, конечно. сместить фото произвольно, но это уже делается индивидуально.

Изображение слева/справа

Как и размеры, выравнивание и отступы задаются для содержащего контейнера, а не само изображение. Для этого лучше использовать дополнительный класс.

<div class="item-image pull-right">
  <img src="pic.jpg" alt="test" />
</div>

thumb horiz middle 01

Сверху отступ можно не задавать, обычно он обеспечивается нижним отступом предыдущего блока.

Для рисунка слева задаем отступ справа, соответственно, для рисунка справа - отступ слева. При выборе величины отступа учитываем размер шрифта, размер изображения и ширину содержащей колонки. Нижний отступ можно задать чуть меньше.

/* рисунок слева */
.item-image.pull-left {
  float: left;
  margin: 0 8px 2px 0px;
};
/* рисунок справа*/
.item-image.pull-right{
  float: right;
  margin: 0 0px 2px 8px;
}

Изображение по центру

Чтобы фотография располагалась по центру - устанавливаем автоматические отступы, добавив еще один класс.

test

Не забываем, чтобы автоматические отступы справа и слева работали - нужно явно задать размеры контейнера (вероятно, больше чем при выравнивании по краям).

/* рисунок по центру*/
.item-image.pull-none {
  float: none;
  margin: 0 auto 2px;
}

Предупреждение.
Если изображение имеет высоту, которая превышает высоту текста, расположенного сбоку, то элементы следующего материала страницы (заголовок, текст и пр.) тоже будут обтекать изображение.

Чтобы этого избежать, в конце материала должен быть размещен очищающий элемент, которому задано свойство clear: both;, или для контейнера материала должно быть задано свойство overflow: hidden;