Как изменить размер изображений из-за ширины контейнера автоматически на стороне сервера / без CSS

Кто-нибудь знает, как изменить размер обслуживаемых изображений, поэтому изображение имеет ширину из-за ширины контейнеров содержимого. Я не хочу изменять размер изображения с помощью 100% -ной ширины css, но вместо этого измените размеры и размеры, если это изображение само по себе.

Например: изображение в изделии размером 400px × 300px . Но в обзоре мне нужно только 200px × 150px . Но я не хочу редактировать каждую часть своей темы, потому что есть много разных размеров. Есть ли вероятность, что это работает автоматически?

Solutions Collecting From Web of "Как изменить размер изображений из-за ширины контейнера автоматически на стороне сервера / без CSS"

Поскольку такие вещи часто запрашиваются, я написал плагин под названием «Динамическое изменение размера изображения» . Это в основном плагин, но из-за однофакторного подхода его можно использовать в качестве mu-plugin или темы без проблем. Основной целью является изменение размера отдельных изображений по требованию на заданную высоту / ширину.

Это аргументы «Template Tag» / function и shortcode:

 src // ID or path height // New/resized height width // The resized width classes // custom classes for CSS targeting hwmarkup // Do you want the height="ABpx" width="ABpx" on the image tag? 

Теперь вы можете просто установить hwmarkup в true/yes/1/on и он избавится от ширины тега img -HTML width/height -attributes, поэтому браузер автоматически изменит его размер до ширины контейнера. Вы могли бы пойти дальше и просто расширить класс:

 <?php defined( 'ABSPATH' ) OR exit; /** * Plugin Name: (#120987) Resize Image to Container Width * Author: Franz Josef Kaiser * Author URI: http://unserkaiser.com * Needs @link https://github.com/franz-josef-kaiser/Dynamic-Image-Resize */ class wpse120987ResizeImgToContainerWidth extends oxoDynamicImageResize { /** * Set the Attributes * @param $atts */ public function setAttributes( $atts ) { $this->atts = wp_parse_args( $atts, array( 'width' => $GLOBALS['content_width'] ) ); } } function dynamic_image_resize_extd( $atts ) { return new wpse120987ResizeImgToContainerWidth( $atts ); } add_shortcode( 'dynamic_image', 'dynamic_image_resize_extd' ); 

Обратите внимание, что это не проверено, а просто быстрый проект.

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

Только способ, который может работать, – это указать все размеры изображения в CSS, но не обслуживать изображения, а только ссылку на их src через атрибут data-xxxxxx. После загрузки страницы вы запускаете некоторый JS, который для каждого изображения проверяет свой CSS определенный рост и ширину и устанавливает src img на url, который будет динамически генерировать изображение в требуемых размерах.

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

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

Я думаю, вам просто нужны add_image_size () и the_post_thumbnail () , например,

 add_image_size('article', 400, 300, /*crop=*/ true); add_image_size('overview', 200, 150, /*crop=*/ true); the_post_thumbnail('article');