Размеры и выравнивание изображений

Можно использовать свойство 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 задано для того, чтобы при выводе контента в несколько колонок, в боковой колонке, или просто сужения ширины, размер картинки автоматически уменьшался. Это избавляет от необходимости создавать дополнительные стилевые правила, в зависимости от ширины колонки.

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

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

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

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

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

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

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

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

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

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

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

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