Если такое выпирание картинки действительно уместно (о чём нужно справиться у дизайнера), в ЦСС для картинки пропишем смещение вправо на 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.
|