Как я могу отображать изображения с одинаковой высотой с CSS?

Question

У меня есть сайт знакомств, и я отображаю списки пользователей с фотографиями профиля. Если у пользователя нет изображения профиля, я отображаю указанное c изображение. Вот код:

@register.inclusion_tag(filename='accounts/profile_picture.html', takes_context=True)
def profile_picture(context, user, geometry, with_link=True, html_class=''):
    context = copy.copy(context)
    geometry_splitted = geometry.split('x')
    width = geometry_splitted[0]
    if (len(geometry_splitted) == 2):
        height = geometry_splitted[1]
    else:
        height = geometry_splitted[0]
    context.update({
        'user': user,
        'geometry': geometry,
        'width': width,
        'height': height,
        'with_link': with_link,
        'html_class': html_class,
    })
    return context

profile_picture. html:

{% thumbnail user.photo.file geometry crop='center 20%' as image %}
    <img src="{{ image.url }}" alt="{{ user.name }}" width="{{ image.width }}" height="{{ image.height }}" class="img-fluid {{ html_class }}" />
{% empty %}
    <img src="{% static 'speedy-core/images/user.svg' %}" alt="" width="{{ width }}" height="{{ height }}" class="img-fluid {{ html_class }}" />
{% endthumbnail %}

CSS:

.img-fluid {
  max-width: 100%;
  height: auto;
}

Но проблема в том, что из-за этого height: auto; вещь, пользователи без изображения профиля имеют изображения профиля выше, чем пользователи с изображениями профиля. Я хочу отображать всех пользователей с одинаковой высотой и, если необходимо, отображать меньшую ширину для пользователей без изображения профиля (в качестве изображения профиля которого отображается speedy-core/images/user.svg). По возможности без изменения самого файла user.svg. Как мне сделать это с CSS?

Редактировать: Я думал об определении max-height для этих изображений, но я не знаю точное значение для max-height, чтобы определить чтобы высота изображений была одинаковой.

Answer 1

Я включил Дополнительный контекст раздел ниже. Для начинающих читателей, я предлагаю прочитать это в первую очередь.

Решение

• Мы создаем placeholder-wrapper с теми же aspect_ratio, что и geometry.
  Это позволяет мы ограничимся тем же height (резюмируем: width ограничен столбцами).
• Мы центрируем изображение в placeholder-wrapper.

profile_picture. html:

<!-- <img src="{% static 'speedy-core/images/user.svg' %}" alt="" width="{{ width }}" height="{{ height }}" class="img-fluid {{ html_class }}" /> -->
     <div class="placeholder-wrapper" style="padding-top: {{ aspect_ratio }}%;">
         <img src="{% static 'speedy-core/images/user.svg' %}" alt="" class="img-fluid {{ html_class }}" />
     </div>

user_tags.py:

def profile_picture(...):
    ...
    context.update({
        ...
        'width': width,
        'height': height,
        'aspect_ratio': float(height) / float(width) * 100,  # Add this
        ...
    })
    return context

CSS / speedy-core. css:

.profile-picture .placeholder-wrapper {
    position: relative;
}

.profile-picture .placeholder-wrapper > img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: auto;
    height: 100%;
}

Дополнительный контекст

• Изображения профиля используются в <div class="col-sm-6 col-md-3 mb-0">.

  • На снимках экрана ниже показаны 4 столбца согласно col-md-3, но решение является отзывчивым.
  • width ограничено столбцами; height: auto из Bootstrap * img-fluid.

• Имеются внутренние размеры c 2 (допущение: ширина ≥ высота).

  • Фиксированный - geometry (например, 256x200) thumbnail свободного размера user.photo.file
  • Заполнитель изображения (32x32) user.svg

До:

После:

Answer 2

Вместо использования height:auto упомяните указанную c высоту, такую ​​как height:500px, он сделает все снимки одинакового размера. И вы можете использовать media запросов, чтобы упомянуть высоту при разных размерах экрана .