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

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 является хорошим сопутствующим дополнением к подгонке объекта, так как позволяет изменять положение обрезки на любую позицию для каждого изображения.
Брайан Уиллис