title: "Image Dimensions Control" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Editor Controls - Src - Repos

Image Dimensions Control

Elementor image dimensions control displays a width input, a height input and an apply button. It is used by the Image Size group control to allow the user to set custom width or height for an image.

The control is defined in Control_Image_Dimensions class which extends Control_Base_Multiple class.

When using this control, the type should be set to \Elementor\Controls_Manager::IMAGE_DIMENSIONS constant.

参数

名称	类型	默认值	描述
`type`	`string`	image_dimensions	控件的类型。
`label`	`string`		显示在字段上方的标签。
`description`	`string`		显示在字段下方的描述。
`show_label`	`bool`	false	是否显示标签。
`label_block`	`bool`	true	是否在单独一行显示标签。
`separator`	`string`	default	设置控件分隔符的位置。可用值为 `default`、`before` 和 `after`。`default` 将隐藏分隔符，除非控件类型有特定的分隔符设置。`before` / `after` 会将分隔符定位在控件之前/之后。
`default`	`array`		默认的图像尺寸值。 $width (`int`) 图像宽度。 $height (`int`) 图像高度。

返回值

[
    'width' => '',
    'height' => '',
]

(array) 一个包含图像尺寸值的数组：

$width (int) 图像宽度。
$height (int) 图像高度。

用法

```php {14-25}

start_controls_section( 'content_section', [ 'label' => esc_html__( 'Content', 'textdomain' ), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( 'custom_dimension', [ 'label' => esc_html__( 'Image Dimension', 'textdomain' ), 'type' => \Elementor\Controls_Manager::IMAGE_DIMENSIONS, 'description' => esc_html__( 'Crop the original image size to any custom size. Set custom width or height to keep the original size ratio.', 'textdomain' ), 'default' => [ 'width' => '', 'height' => '', ], ] ); $this->end_controls_section(); } } ``` ?>