Как Сделать Фиксированный Размер Рамки Фото В Описании Товара?
#1
Отправлено 26 Июль 2012 - 15:04
Подскажите, пожалуйста, как сделать фиксированный размер рамки большого фото (и маленьких) в описании товара. Сейчас, если добавляешь не квадратную фотографию, рамка тоже становится не квадратной. Во вложении скрин, на котором показано, как хотелось бы сделать.
#2
Отправлено 26 Июль 2012 - 20:28
<img class="cornerAll withBorder" src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />
и заменить на
<img src="{GOODS_IMAGE_MEDIUM}" alt="{GOODS_NAME}" />
Далее в файл стилей main.css добавить
.goodsDataMainImage { padding: 2px; text-align: center; width: 280px; }
#3
Отправлено 26 Июль 2012 - 23:13
#4
Отправлено 27 Июль 2012 - 20:03
<div class="goodsDataMainImage">
и заменить на
<div class="goodsDataMainImage cornerAll withBorder">
#5
Отправлено 28 Июль 2012 - 11:55
#6
Отправлено 28 Июль 2012 - 14:17
Flagman86@mail.ru (28 Июль 2012 - 11:55) писал:
Значит у тебя само изображение маленького размера. Если ты установишь его размер при окрытии бо'льшим, чем он на самом деле есть, то качество изображения ухудшится. Просто загружай картинки большого размера, и тогда при увеличении они будут большими.
Vaccina (27 Июль 2012 - 20:03) писал:
<div class="goodsDataMainImage">
и заменить на
<div class="goodsDataMainImage cornerAll withBorder">
Спасибо, так работает. А как сделать, чтобы маленькие изображения под основным тоже были в рамках одинакового размера?
#7
Отправлено 30 Июль 2012 - 19:52
<div class="goodsDataMainImagesIcon left">
и потом уже получиться
<div class="goodsDataMainImagesIcon left cornerAll withBorder">
В данном случае даже не нужно будет задавать размеры, так как они уже заданы в классе .goodsDataMainImagesIcon
#8
Отправлено 30 Июль 2012 - 22:20
#9
Отправлено 31 Июль 2012 - 19:51
#10
Отправлено 31 Июль 2012 - 22:20
#11
Отправлено 01 Август 2012 - 20:10
.goodsDataMainImagesIcon { height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; }
заменить на
.goodsDataMainImagesIcon { display: table; height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; }
далее добавить
.goodsDataMainImagesIcon a { display: table-cell; vertical-align: middle; }
далее найти
.goodsDataMainImagesIcon img { padding: 2px; }
и заменить на
.goodsDataMainImagesIcon img { padding: 2px; vertical-align: bottom; }
#12
Отправлено 01 Август 2012 - 22:08
Vaccina (30 Июль 2012 - 19:52) писал:
<div class="goodsDataMainImagesIcon left">
и потом уже получиться
<div class="goodsDataMainImagesIcon left cornerAll withBorder">
В данном случае даже не нужно будет задавать размеры, так как они уже заданы в классе .goodsDataMainImagesIcon
С большой картинкой все супер, а вот в маленьких картинках не получается, у меня код немного другой <div class="goodsDataMainImagesIcon floatLeft"> , помогите, пож-та.
#13
Отправлено 01 Август 2012 - 22:17
Vaccina (01 Август 2012 - 20:10) писал:
.goodsDataMainImagesIcon { height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; }
заменить на
.goodsDataMainImagesIcon { display: table; height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; }
далее добавить
.goodsDataMainImagesIcon a { display: table-cell; vertical-align: middle; }
далее найти
.goodsDataMainImagesIcon img { padding: 2px; }
и заменить на
.goodsDataMainImagesIcon img { padding: 2px; vertical-align: bottom; }
Так работает, но теперь у рамок вокруг изображений углы не скругленные, а прямые. Как это исправить?
#14
Отправлено 01 Август 2012 - 22:25
ogonek7777 (01 Август 2012 - 22:08) писал:
У меня работает и floatLeft , по-моему, тут вообще не причем. Также найдите в коде goodsDataMainImagesIcon и меняйте, как написано.
#15
Отправлено 02 Август 2012 - 21:07
Пример:
<!-- Уменьшенное изображение товара --> <div class="goodsDataMainImagesIcon left"> <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </div>получиться
<!-- Уменьшенное изображение товара --> <div class="withBorder cornerAll left"> <div class="goodsDataMainImagesIcon"> <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img class="cornerAll withBorder" rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </div> </div>
У блока
<div class="goodsDataMainImagesIcon left">должно быть убрана бордюр и закругление.
Класс withBorder задает бордюр, а cornerAll закругление, left или floatLeft это обтекание по левому краю.
#16
Отправлено 02 Август 2012 - 23:21
#17
Отправлено 03 Август 2012 - 15:39
551 (01 Август 2012 - 22:25) писал:
Не знаю, не работает.
Что хотелось бы:
1. выровнять все иконки в одинаковую высоту и ширины (вписать в квадрат),
2. отцентровать посередине,
3. сделать полностью белый фон.
При попытке изменить по вышеуказанному появляется вторая рамка, между рамками сохранился цвет фона, выравнивание по высоте, а хочется по центру. Высота иконок разная.
#18
Отправлено 03 Август 2012 - 16:05
ogonek7777 (03 Август 2012 - 15:39) писал:
Что хотелось бы:
1. выровнять все иконки в одинаковую высоту и ширины (вписать в квадрат),
2. отцентровать посередине,
3. сделать полностью белый фон.
При попытке изменить по вышеуказанному появляется вторая рамка, между рамками сохранился цвет фона, выравнивание по высоте, а хочется по центру. Высота иконок разная.
Ах, да. Там, по-моему, в стилях нужно удалить рамку. Я точно не помню, но у меня сначала тоже было 2 рамки. Сейчас у меня такой код в шаблоне "товары":
<!-- Другие изображения товара. Отображаются если есть изображения товара --> {% IFNOT goods_images_empty %} {% FOR goods_images %} <!-- Заголовок и обёртка для изображений, которая позволяет не показывать уменьшенное изображение товара если оно у него лишь одно --> {% IF goods_images.first %} <div {% IF goods_images.length=1 %}style="display:none;"{% ENDIF %}> {% ENDIF %} <!-- Уменьшенное изображение товара --> <div class="goodsDataMainImagesIcon left cornerAll withBorder"> <a href="{goods_images.LARGE}" rel="gallery" target="_blank" title="{goods_images.NAME}"><img rel="{goods_images.MEDIUM}" src="{goods_images.ICON}" alt="{goods_images.NAME}" /></a> <!-- Идентификатор изображения товара, используется для галереи изображений --> <input type="hidden" rel="{goods_images.ID}" /> </div> <!-- В самом конце закрываем обёртку для списка маленьких изображений товара --> {% IF goods_images.last %} </div> {% ENDIF %} {% ENDFOR %} {% ENDIF %}
И вот такой в стилях:
/* Страница товара. Характеристики */ .goodsDataFeatures {width:100%;font-size:12px;} .goodsDataFeatures p {line-height:1.2em;float:left;margin:0.2em 0em 0em 0em;padding:0;width:100%;background:transparent url('{ASSETS_IMAGES_PATH}grey_dotted.gif') repeat-x scroll 0 100%;} .goodsDataFeatures p span {line-height:1.2em;border-bottom:1px solid #FFFFFF;background:#FFFFFF none repeat scroll 0 0;color:#A9A9A9;} /* Страница товара. Основные данные */ .goodsDataMain td {vertical-align:top} .goodsDataMainImageBlock {width:280px;} .goodsDataMainImageBlock img {padding:2px;} .goodsDataMainImagesIcon {width:50px;height:50px;margin:0.2em 0.4em 0.2em 0em;text-align:center;vertical-align:middle;} .goodsDataMainImagesIcon img {padding:2px;} .goodsDataMainImageZoom {text-align:center;padding:0.5em;} .goodsDataMainImageZoom a {padding:5px 0px 5px 25px;background:transparent url('{ASSETS_IMAGES_PATH}zoom-magnifying.png') no-repeat scroll center left;} .goodsDataMainModificationDataBlock, .goodsDataMainModificationsBlock, .goodsDataMainDiscountBlock, .goodsDataMainDeliveryBlock, .goodsDataFormSubmitButton, .goodsDataMainModificationsDescriptionBlock {padding:1em;}
На скриншоте видно, что все рамки одинаковые, но фотки в них не выровнены по вертикали. Если к этому добавить то, что написали:
Попробуйте сделать так - в файле стилей найти .goodsDataMainImagesIcon { height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; } заменить на .goodsDataMainImagesIcon { display: table; height: 50px; margin: 0.2em 0.4em 0.2em 0; text-align: center; vertical-align: bottom; width: 50px; } далее добавить .goodsDataMainImagesIcon a { display: table-cell; vertical-align: middle; } далее найти .goodsDataMainImagesIcon img { padding: 2px; } и заменить на .goodsDataMainImagesIcon img { padding: 2px; vertical-align: bottom; }
То получится - все изображения в ряд, рамки одинакового размера по горизонтали/вертикали, внутри рамок фотки посередине по вертикали/горизонтали. Но у рамок в таком случае пропадают скругленные углы. Чтобы их сделать круглыми, надо прописать остальное, но я пока не разбирался.
#19
Отправлено 04 Август 2012 - 14:20
#20
Отправлено 07 Январь 2013 - 22:00
width: 280px; на ширину не влияет.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных