Как я могу установить размеры изображений и при этом иметь отзывчивые изображения, используя атрибут srcset?

У меня есть эта функция в моей теме для создания размеров миниатюр.

  set_post_thumbnail_size( 620, 848, true );
            if (function_exists('add_image_size')){
                    add_image_size( 'compare-shop-logo', 150 );
                    add_image_size( 'compare-single-product-2', 250, 188, true );
                    add_image_size( 'compare-slider-image', 848, 487, true );
                    add_image_size( 'compare-offer-box', 400, 300, true);
                    add_image_size( 'compare-blog-box', 400, 225, true );
                    add_image_size( 'compare-quote-box', 408, 437, true );
            }

Как получилось, что если я изменю размеры коробки предложений, я потеряю набор src и размеры в теге img? и есть ли способ изменить размер с сохранением пропорций?

<img width="400" height="300" src="myimage-400x300.jpg" class="embed-responsive-item wp-post-image" alt="image" srcset="myimage-1-400x300.jpg 400w, http:///myimage-250x188.jpg 250w" sizes="(max-width: 400px) 100vw, 400px">

Спасибо

Author: Andy Macaulay-Brook, 2016-10-07
Source

1 answers

Атрибут srcset создается из изображений с одинаковым соотношением сторон. Создайте несколько из них, и все будет в порядке. 

add_image_size( 'compare-offer-box', 400, 300, true);
add_image_size( 'compare-offer-box-2', 800, 600, true);
add_image_size( 'compare-offer-box-3', 1200, 900, true);

Например. Четвертый, логический, аргумент указывает WP обрезать в точных пропорциях.

Чтобы изменить размер без обрезки, используйте: 

add_image_size( 'compare-offer-box', 400, 9999, false);
add_image_size( 'compare-offer-box-2', 800, 9999, false);
add_image_size( 'compare-offer-box-3', 1200, 9999, false);

Это предполагает, что вам нужно изображение определенной ширины, а затем любой высоты, требуемой пропорциями. Вы увидите некоторый код в Интернете, который использует значения 0 или null для неограниченного измерение, но комментарии в исходном коде WP предупреждают, что это может привести к "непредсказуемым результатам"

.

Если вы предпочитаете пропорционально масштабировать, ограничивая высоту, просто используйте огромное значение для ширины:

add_image_size( 'compare-offer-box', 9999, 400, false);
add_image_size( 'compare-offer-box-2', 9999, 800, false);
add_image_size( 'compare-offer-box-3', 9999, 1200, false);

Если вы хотите сохранить пропорции, но масштабировать изображение так, чтобы оно помещалось в определенном пространстве, скажем, 400 пикселей на 400 пикселей, вы можете указать как максимальную ширину, так и высоту, но для обрезки установлено значение false:

add_image_size( 'compare-offer-box', 400, 400, false);

Обратите внимание, что если вы ограничиваете себя по высоте, то вам может потребоваться чтобы также настроить атрибут "размеры", так как по умолчанию используется ширина окна просмотра с максимальным значением ширины указанного размера изображения.

Не забывайте, что затем вам потребуется восстановить размеры изображений для существующих изображений. Есть плагины, которые делают это хорошо: Найдите восстановленные миниатюры в репозитории плагинов.

 9
Author: Andy Macaulay-Brook, 2016-10-07 17:09:10