Блог

Главная - Вопросы по программированию - Настройка высоты элемента html img с помощью функции

Настройка высоты элемента html img с помощью функции

#javascript #html #css #django

#javascript #HTML #css #django

Вопрос:

Я пытаюсь установить высоту изображений, загруженных в мой html-файл, с помощью Django как таковой:

 <img data-original={{img.url}} width='310' height=calcHeight({{img.height}}, {{img.width}})/>

Функция ‘calcHeight (h, w)’ является простой функцией для масштабирования высоты изображения пропорционально ширине 310. Я должен это сделать, потому что я использую плагин lazyloader, который должен генерировать пустые заполнители для изображений перед загрузкой самих изображений. Изображения имеют разные размеры, поэтому мне нужно получить высоту и ширину изображений до загрузки фактических изображений, в противном случае заполнители будут «без высоты» до загрузки фактических изображений, в результате чего макет будет испорчен в процессе.

Приведенный выше код не работает, и я предполагаю, что это потому, что вы не можете вызвать функцию для такой высоты. Надеюсь, я достаточно точно объяснил вопрос и заранее благодарю за любые советы!

Комментарии:

1. что «не работает»? вы получаете сообщение об ошибке?

2. Извините, высота по существу установлена на 0, что не дает заполнителям высоты при загрузке веб-страниц. Это приводит к переполнению изображений другими изображениями / текстом, когда они загружаются после прокрутки в окне просмотра.

Ответ №1:

Вы не можете вызвать функцию, которая принимает аргументы внутри шаблона с помощью Django. Чтобы добиться этого, вам нужно будет написать тег шаблона или отфильтровать его самостоятельно.

Тогда вы могли бы сделать что-то вроде:

 {% my_img_tag img.url img.height img.width %}

Который будет включен в ваш конструктор тегов:

 def my_img_tag(url, height, width):
    new_height = calcHeight(height, width)
    return {'url': url, 'height': new_height, 'width': width}

И ваш шаблон мог бы выглядеть примерно так:

 <img data-original="{{url}}" width="{{width}}" height="{{height}}"/>

Комментарии:

1. Ах, так вы, по сути, вычисляете новую высоту при загрузке изображения в базу данных, вместо того, чтобы вычислять ее при загрузке веб-страницы?

2. @dutchJSCOOP Вы хотите вычислить изображение, которое появляется на веб-странице и не поступает с сервера? Шаблон Django отображается на сервере, поэтому он не знает о контексте клиента, если это так, возможно, его вычисление с помощью javascript достигнет желаемого эффекта.

3. Нет, я хочу рассчитать высоту изображения, которая поступает с сервера, поддерживаемого django.

Ответ №2:

Я решил проблему, вычислив масштабированную высоту изображения после сохранения в базе данных django как таковую:

 def save(self, *args, **kwargs):
    self.photo_scaledHeight = self.photo_height * (310/self.photo_width)
    super(Post, self).save(*args, **kwargs)

Я добавил поле ‘photo_scaledHeight’ к модели, в которой использовалась фотография, чтобы я мог просто вызвать это в своем шаблоне следующим образом:

 <img data-original={{photo.url}} width='310' height='{{photo_scaledHeight}}' />

@lucas-лазаро указал мне правильное направление

Метки: