Если такое выпирание картинки действительно уместно (о чём нужно справиться у дизайнера), в ЦСС для картинки пропишем смещение вправо на 50 % ширины родительского элемента:

.picture img {
  margin: 0 0 0 50%;
  position: relative;
}

А уже в разметке сдвинем картинку влево на половину собственной ширины, для этого и нужно правило position:relative:

<div class="picture">
  <img src="1.jpg" width="200" height="200"
            style="left: -100px;">
</div>
<div class="picture">
  <img src="2.jpg" width="300" height="200"
            style="left: -150px;">
</div>
<div class="picture">
  <img src="3.jpg" width="400" height="200"
            style="left: -200px;">
</div>

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

Другой способ решения проблемы — запретить картинке быть больше блока, прописав:

.picture img {
  max-width: 100%;
  height: auto;
}

Все ухищрения со смещениями в таком случае не нужны — для выравнивания по центру хватит text-align:center у блока .picture.