Пользовательский размер изображения / миниатюра - кадрирование по соотношению сторон, даже если исходное изображение меньше заданных размеров

11

Обычно, когда вы устанавливаете нестандартный размер изображения с помощью жесткого кадрирования, например, add_image_size( 'custom-size', 400, 400, true );вы получаете следующие результаты:

# 1 Загруженное изображение: 600x500> Миниатюра: 400x400.
# 2 Загруженное изображение: 500x300> Миниатюра: 400x300.
# 3 Загруженное изображение: 300x200> Миниатюра: 300x200.

Однако я хотел бы, чтобы загруженное изображение было меньше заданной ширины, или высоты, или того и другого, нестандартного размера изображения, например, примеры № 2 и № 3 выше, - вместо того, чтобы изображение было просто обрезано, чтобы соответствовать в этих измерениях - он также обрезается в соответствии с их соотношением сторон (которое в данном случае составляет 1: 1) примерно так:

# 1 Загруженное изображение: 600x500> Миниатюра: 400x400.
# 2 Загруженное изображение: 500x300> Миниатюра: 300x300 .
# 3 Загруженное изображение: 300x200> Миниатюра: 200x200 .

Я не верю, что это возможно при использовании стандартных опций add_image_size, но возможно ли использование другой функции или хука, который модифицирует функцию add_image_size?

Или есть плагин, который добавляет эту функциональность?

Любая информация, которую кто-либо может предоставить, будет принята с благодарностью.

images cropping

— Джои Джо Джо Джуниор Шабаду
источник

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

— Джои Джо Джо Джуниор Шабаду

2

Ты прав, что это просто так не работает.

Если вы можете думать о своем вопросе иначе, вы можете получить правильный результат в современных браузерах, используя выбор размеров изображений и адаптивных изображений.

Если вы используете такой код:

add_image_size( 'custom-size-small', 200, 200, true );
add_image_size( 'custom-size-medium', 300, 300, true );
add_image_size( 'custom-size-large', 400, 400, true );

... и в ваших шаблонах что-то вроде:

wp_get_attachment_image( $image_ID, 'custom-size-small' )

... тогда по умолчанию (WP 4.4 и более поздние версии) вы получите тег изображения с наименьшей версией из вашего набора в качестве srcи большими размерами в srcsetатрибуте, из которого будут выбирать новые браузеры и отображать наибольшую соответствующую версию.

Итак, если конкретное изображение не имеет увеличенной версии, это не имеет значения. На изображении 300x200будет 200x200сделана версия, эта версия будет единственной в HTML, и все браузеры покажут ее.

Я работал над этим, настраивая адаптивные изображения, чтобы добиться хорошей производительности в браузерах, которые поддерживают, srcа не поддерживают srcset.

— Энди Маколей-Брук
источник

Спасибо за ответ. Это интересное решение, но, к сожалению, я не думаю, что оно подойдет для моей ситуации. Изображения будут загружены конечным пользователем - и могут быть любого размера. Это решение, если я не понимаю его, работает, только если загруженные изображения имеют фиксированный набор размеров. Например, приведенный выше код будет работать для изображения размером 500x200, но не для изображения размером 500x199.

— Джои Джо Джо Джуниор Шабаду

2

Это не очень хорошее решение , так как это более новое решение CSS , и это работает только в 78,9% браузерах пользователей , но есть несколько polyfills , которые могут преодолеть этот объект-FIT-изображения и fitie

img {
    display: block;
    overflow: hidden;
    width: 400px;
    height: 400px;
    -o-object-fit: cover;
       object-fit: cover;
}

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

— Брайан Уиллис
источник

Спасибо за ответ. Я даже не знал об этом свойстве, но, как вы и сказали, отсутствие поддержки браузера делает его бесполезным. Возможно, через несколько лет, может быть.

— Джои Джо Джо Джуниор Шабаду

На самом деле, я только начал использовать полифилл «object-fit-images», и, хотя он, похоже, работает, Джоуи, я еще не тестировал IE, поскольку у меня есть только Mac. Здесь это в действии, хотя, если вы хотите посмотреть . Он используется в эскизах сетки на этой странице. Я знаю, что там должен быть плагин, который решает эту проблему, хотя. Однако до сих пор YoImages является хорошим сопутствующим дополнением к подгонке объекта, так как позволяет изменять положение обрезки на любую позицию для каждого изображения.

— Брайан Уиллис