Есть вид материалов, выглядит так:
http://i067.radikal.ru/1308/a6/b2755f118c71.png
Как сделать так что бы изображение не растягивалось? А встраивалось в эту рамку...
Вот вид материала:
Код
<article class="itemPreview">
<div class="itemImage"><a href="$ENTRY_URL$" title="Металлические двери"><img src="/img1/Catalog/dveri/metalichiskie_dveri.png" class="gphoto" id="id-gphoto-$ID$" alt="Металлические двери"></a></div>
<div class="itemTitle" align="center"><a href="$ENTRY_URL$" title="Металлические двери">Металлические двери</a>$MODER_PANEL$</div>
</article>
Таблица стилей:
Код
/* shop */
.newProducts {margin-bottom: 21px;}
div.itemTitle {background:#0e0f14; padding: 12px; font-size: 18px; color: white;}
div.itemTitle a {color: white; text-decoration: none;}
div.itemPrice {font-size: 20px; padding: 12px 0; color: #272727;}
div.itemPrice > span {font-size: 14px; vertical-align: top; color: #87888a; padding-left: 10px;}
div.itemDescription {color: #757474;font-size:14px;}
a.pink.small {background: url(/img/icon_pink_small.png) no-repeat; width: 86px; height: 23px; line-height: 23px; }
a.pink.big, #order-button {background: url(/img/icon_pink_big.png) no-repeat; width: 119px; height: 29px; line-height: 29px; margin-right: 19px;}
a.black.big,
#order-but-continue,
#order-but-recalc {background: url(/img/icon_black_big.png) no-repeat; width: 119px; height: 29px; line-height: 29px; margin-right: 19px;}
a.add2cart,
a.buyNow,
#order-but-continue,
#order-but-recalc,
#order-button {text-align: center; display:inline-block; text-decoration: none; color: white; margin: 15px 0; border: none; font-size: 14px;}
a.add2cart:hover,
a.buyNow:hover,
#order-but-continue:hover,
#order-but-recalc:hover,
a.add2cart:active,
a.buyNow:active,
#order-but-continue:active,
#order-but-recalc:active {text-decoration:underline;}
a.add2cart, a.buyNow {text-shadow: #ad003f 0px 1px 1px;}
/* preview */
.itemPreview {width: 173px; margin-bottom: 30px; display: inline-block; margin-right:36px; float:left;}
.list-item:nth-child(4n) .itemPreview {margin-right: 0px;}
.itemPreview > div.itemImage {border: 1px solid #d2d2d2; width: 159px; height: 204px; overflow: hidden; padding: 6px; background: white;}
.itemPreview > div.itemImage img {width: 161px; height: 206px;}
/* item page */
.itemPage > div.itemImage {width: 226px; overflow: hidden; text-align: center;}
.itemPage > img#ipreview {width: 214px; height: 272px; padding: 6px; margin-bottom: 16px; border: 1px solid #d6d6d6;}
hr.itemPageHR {margin: 10px 0 25px 0;}
hr.descriptionBorder {margin: 25px 0 15px 0;}
.itemPageTable .gphoto {max-width: 232px; border: 1px solid #d6d6d6;}
.gphotoSmall {border: 1px solid white; outline: 1px solid #d6d6d6; padding: 1px;}
.gphotoSmalladdMagrin {margin-left: 10px;}
.gphoto:nth-child(4), .gphoto:nth-child(5) {margin-left: 10px;}
.shopRating {margin: 20px 80px; text-align: center;}
ul.shop-options {margin: 0; padding: 0;}
ul.shop-options li {list-style: none; display: inline-block; margin-right: 15px;}
ul.shop-options li select {border: 1px solid #d0d0d1;}
.itemPageTable { margin-bottom: 50px; }
.addLoginPadding td {padding: 5px;}