Советы Бюро Горбунова: artgorbunov.ru/bb/soviet
И литература, которую они советуют поступающим в школу: artgorbunov.ru/school/2feb2015, раздел "Системные требования". Можно начать с книги "Настольная книга газетного дизайнера" и применять знания оттуда в веб.

Axure поддерживает создание адаптивных макетов, да и в целом приятный инструмент.

Здесь нужно поискать решения по типографике. Вот неплохой инструмент: настраиваете параметры типографики - получаете css-код: www.gridlover.net/app

Я остановился на slim: (1) он быстрее, (2) удобнее располагать параметры тега в несколько строк.
Препроцессоры, они же - синтаксические сахара - haml slim sass coffeescript - компилируются в html css js
Шаблонизаторы - языки верстки с возможностью вставки логики на Rails - erb, haml, slim

Можно не через img, а через background:

<div class='image'></div>

.image{
  width: 200px;
  height: 300px;
  background: url('ваша картинка') no-repeat center center;
  background-size: cover;
}

Картинка впишется по центру контейнера