Как сделать превью пропорциональным?

Question

Андрей @Dancko

Студент

CSS

Как сделать превью пропорциональным?

В галерее на превьюшках фотографии выглядят непропорционально и некрасиво. Как сделать пропорциональные превьюшки, чтобы ничего не растягивалось?

Вопрос задан более трёх лет назад
72 просмотра

5 комментариев

Подписаться 1 Простой 5 комментариев

Антон Р. @anton_reut

Надо делать обрезку превьюшек при загрузке, скрипт править надо. Через CSS тоже можно через overflow hidden но это костыль как по мне.

Написано более трёх лет назад
Андрей @Dancko Автор вопроса

Антон Р., обрезать надо до размеров превью? То есть размер блока с превьюшкой у меня 350px x 360px, а фулл может быть в несколько тысяч пикселей. Получится, что на превью будет малая часть изображения. Или я что то не понимаю?

Написано более трёх лет назад
Антон Р. @anton_reut

Андрей,
что на превью будет малая часть изображения
- нет. Берется фулл скажем 1600*1200 и режется сначала до 1200*1200 (берем меньшую сторону и из неё делаем квадрат), потом уменьшаем до нужной величины, скажем 300*300 ( - Закажи код у погроммиста!!11)

Написано более трёх лет назад
Андрей @Dancko Автор вопроса

Антон Р., я не могу вносить изменения в код. Всё что у меня есть - админка жумлы (работаю с ней в первый раз). Сейчас нарезал руками - вроде бы всё отлично.
Сейчас попробую нарезать пару десятков и посмотреть что получится.
Спасибо!
spoiler
Меня ждет долгая ночь кропотливой рутинной работы)

Написано более трёх лет назад
Андрей @Dancko Автор вопроса

Дмитрий, там есть только настройки высоты и ширины самих img-ов с превью.

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 5 часов назад
- 74 просмотра
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 5 часов назад
- 88 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- 19 часов назад
- 74 просмотра
1

ответ
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- 21 час назад
- 72 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- 23 часа назад
- 56 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 64 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Как сделать так, чтобы звезда падала только при скролле страницы?
- 1 подписчик
- вчера
- 80 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему вылезает второй слайд?
- 1 подписчик
- вчера
- 39 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- 16 апр.
- 113 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Разработать парсер и админку

19 апр. 2024, в 14:12

30000 руб./за проект

Создать логотип

19 апр. 2024, в 14:10

500 руб./за проект

Разработка дизайна мобильного приложения которое управляет вентиляцией

19 апр. 2024, в 14:01

70000 руб./за проект

Надо делать обрезку превьюшек при загрузке, скрипт править надо. Через CSS тоже можно через overflow hidden но это костыль как по мне.
Антон Р., обрезать надо до размеров превью? То есть размер блока с превьюшкой у меня 350px x 360px, а фулл может быть в несколько тысяч пикселей. Получится, что на превью будет малая часть изображения. Или я что то не понимаю?
Андрей,
что на превью будет малая часть изображения
- нет. Берется фулл скажем 1600*1200 и режется сначала до 1200*1200 (берем меньшую сторону и из неё делаем квадрат), потом уменьшаем до нужной величины, скажем 300*300 ( - Закажи код у погроммиста!!11)
Антон Р., я не могу вносить изменения в код. Всё что у меня есть - админка жумлы (работаю с ней в первый раз). Сейчас нарезал руками - вроде бы всё отлично.
Сейчас попробую нарезать пару десятков и посмотреть что получится.
Спасибо!
spoiler
Меня ждет долгая ночь кропотливой рутинной работы)
Дмитрий, там есть только настройки высоты и ширины самих img-ов с превью.

Answer 1 · 2019-10-09 19:05:02

Думаю, нужно уточнить, какое поведение от "неквадратных" фото вы хотите? И... реализовать его на CSS!
Я вижу два варианта:
- поля,
- обрезка.
Первый вариант можно реализовать довольно консервативно, как мне кажется. Но, думаю, в любом случае стоит посмотреть на:
https://html5book.ru/svoystva-object-fit-i-object-...
как советовали выше!
Но это или без поддержи IE, или для него искать полифилл, или костыль, т.к.:
https://caniuse.com/#feat=object-fit

Как сделать превью пропорциональным?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт