На форуме InfoScript.ru вы можете: задать вопросы по php, вопросы по javascript, вопросы по системе uCoz, заказать графику для вашего сайта и просто пообщаться с хорошими людьми
Страница 1 из 11
Модератор форума: frenkmalcov, sold93 
Форум вебмастера » Основной раздел » Вопросы по HTML » Растянуть картинку по ширене
Растянуть картинку по ширене
MaSTerGuiTar Дата: Четверг, 01.08.2013, 19:55 | Сообщение # 1
Offline
Генералиссимус
Модераторы
Сообщений:1653
Награды:17
Замечания:0%
Репутация
183
Есть вид материалов, выглядит так:
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;}

 
sold93 Дата: Пятница, 02.08.2013, 17:19 | Сообщение # 2
Offline
Гуру
Модераторы
Сообщений:1135
Награды:11
Замечания:0%
Репутация
404
Код
.itemPageTable .gphoto {max-width: 232px; max-height: XXXpx; border: 1px solid #d6d6d6;}
XXX - замени на нужное значение


подайте рептацию бедному студенту
 
MaSTerGuiTar Дата: Пятница, 02.08.2013, 20:40 | Сообщение # 3
Offline
Генералиссимус
Модераторы
Сообщений:1653
Награды:17
Замечания:0%
Репутация
183
Это не то) Мне надо что бы изображение встраивалось в рамку и при этом не меняла свои прапорции
 
vov2790 Дата: Понедельник, 19.08.2013, 16:22 | Сообщение # 4
Offline
Опытный
Пользователи
Сообщений:108
Награды:0
Замечания:0%
Репутация
10
Попробуй в css фону прописать
Код
background-size: cover;

Хотя не уверен, что это то что вам нужно angel


PHP+MySQL Хостинг с неограниченным трафиком и тестовым периодом от 30 рублей в месяц >> goo.gl/mF3Hsn
 
Форум вебмастера » Основной раздел » Вопросы по HTML » Растянуть картинку по ширене
Страница 1 из 11
Поиск: