Перейти к содержимому


Фотография
- - - - -

Пропорции изображений в материалах и категориях

настройка изображения

Лучший Ответ Станислав , 14 August 2013 - 11:13

haginar, вашу задачу нельзя решить указанием настроек width и heigth в принципе

 

Вчера только подсмотрел на Хабре интересную статью про управление изображениями. В начале есть описание, как придать средствами CSS нужные пропорции картинкам.

 

В шаблоне media\zoo\applications\jbuniversal\templates\catalog\renderer\category\_default.php (или вашем личном, что предпочительнее, чтобы не затерлось при обновлении), меняете строку 42:

<img src="<?php echo $image['src']; ?>" <?php echo $image['width_height']; ?> 

 на 

<div class="img_wrapper"><img src="<?php echo $image['src']; ?>" <?php echo $image['width_height']; ?></div> 

и прописываете в стилях - либо в jbzoo.css, то ли в шаблоне Joomla, что опять-таки предпочтительнее, чтобы не затерлось при апгрейде:

.img_wrapper{
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}
 
.img_wrapper img{
    position: absolute;
    top: 0;
    width: 100%;
}

padding-top: 75% и width: 100% задают масштаб и пропорции (в данном примере 4 к 3) по высоте и ширине соответственно.Заметьте, что будет картинка будет усечена по высоте, если исходная пропорция по высоте превышает требуемую.

 

Другого решения вы не найдете, в любом случае вам без CSS не обойтись.

Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 5

#1 haginar

haginar

Отправлено 12 August 2013 - 15:54

Здравствуйте! Помогите разобраться хочу у себя на сайте настроить пропорции изображений в процентах а не в пикселях. на пример: в категориях/ Изображение анонса 

Прикрепленные изображения

  • 1.JPG

  • 0

#2 Sliapy

Sliapy

Отправлено 12 August 2013 - 21:01

А если в настройках не указывать размеры, а задать их в процентах в CSS?


  • 0
[color=#aa0000]Не забывайте нажимать кнопку "Вопрос Решён" под сообщением, которое решило Вашу проблему.[/color]

#3 haginar

haginar

Отправлено 13 August 2013 - 17:32

Не подходит, а точнее хочется сделать это в php шаблоне, где то же стоят пропорции но умолчанию( 50 на 50px)


  • 0

#4 haginar

haginar

Отправлено 14 August 2013 - 09:21

Уважаемая поддержка jbzoo подскажите как сделать пропорции изображения в процентах в php шаблоне категорий 


  • 0

#5 Станислав

Станислав

Отправлено 14 August 2013 - 11:13   Лучший Ответ

haginar, вашу задачу нельзя решить указанием настроек width и heigth в принципе

 

Вчера только подсмотрел на Хабре интересную статью про управление изображениями. В начале есть описание, как придать средствами CSS нужные пропорции картинкам.

 

В шаблоне media\zoo\applications\jbuniversal\templates\catalog\renderer\category\_default.php (или вашем личном, что предпочительнее, чтобы не затерлось при обновлении), меняете строку 42:

<img src="<?php echo $image['src']; ?>" <?php echo $image['width_height']; ?> 

 на 

<div class="img_wrapper"><img src="<?php echo $image['src']; ?>" <?php echo $image['width_height']; ?></div> 

и прописываете в стилях - либо в jbzoo.css, то ли в шаблоне Joomla, что опять-таки предпочтительнее, чтобы не затерлось при апгрейде:

.img_wrapper{
    position: relative;
    padding-top: 75%;
    overflow: hidden;
}
 
.img_wrapper img{
    position: absolute;
    top: 0;
    width: 100%;
}

padding-top: 75% и width: 100% задают масштаб и пропорции (в данном примере 4 к 3) по высоте и ширине соответственно.Заметьте, что будет картинка будет усечена по высоте, если исходная пропорция по высоте превышает требуемую.

 

Другого решения вы не найдете, в любом случае вам без CSS не обойтись.


Сообщение отредактировал Станислав: 14 August 2013 - 11:13

  • 2

«Ну и зачем все это, лучше бы водки выпили». Из писем Белинского Гоголю.

 


#6 haginar

haginar

Отправлено 14 August 2013 - 11:17

Спасибо Вам Станислав



То что надо про div class неподумал


  • 0





Click to return to top of page in style!